The last piece of information that is rather important when talking about designing for the mobile web is the viewport meta
tag.
Most mobile browsers assume, and rightfully so, that any page they attempt to render is authored for and intended to be viewed in a desktop browser. In this scenario, mobile browsers will render the page at 980 pixels wide (typically, but some browsers may use an alternative resolution) and then scale the rendered page to fit on the screen of the device. For devices of lower resolution, even our emulated Samsung Galaxy S II in our Opera Mobile emulator with a width of 480 pixels, this means the page is rendered and then scaled down to less than 50 percent of its original size. This makes for some hard reading and leaves users frustrated.
The viewport meta
tag, currently in our _Layout.cshtml
file as <meta name="viewport" content="width=device-width" />
is a meta
tag used to instruct mobile devices as to the resolution and scaling factor...