Controlling the mobile device view port
Controlling the view port size of a mobile device is a relatively easy thing to do. The hard part is deciding the scale and how much control to give the user in adjusting this scale.
The view port is controlled by adding a meta tag to the head of your page:
Using a combination of properties to control the width and scale of the content we can essentially scale the size of which a pixel is rendered on the device.
The meta tag above sets the width of the content equal to the width of the device. This is not to say that your 960 pixel page becomes 768 pixels wide on a small device, it sets the device to display the 960 pixels across the devices 768 pixel screen. A pixel therefore becomes 80% of it's actual size (768 / 960 = 0.8)
Setting minimum and maximum scales tells the device what the safe zoom-in and zoom-out size is. Above, the properties tell the device to not allow any zooming at all.
Interestingly the "viewport" meta tag isn't yet a W3C standard. Given the demand for the tag (it is supported by all popular mobile browsers and used by thousands if not millions of websites), there is now a specification in draft as of 7th May 2013, http://dev.w3.org/csswg/css-device-adapt/ This new specification quite rightly moves the control from the "head" element into css.
@-viewport {
width: 640px;
}
Combining this with media queries one would in theory be able to normalise screen sizes based on the content styles to be rendered.
@media (max-width: 699px) and (min-width: 520px) {
@-viewport {
width: 640px;
}
}
This css would normalise any screen smaller than 700px and larger than 519px to display as though it were 640px wide.
The new spec also allows similar (but more advanced) scale properties along with a new orientation property. So far IE10 is the only browser to even partially implement the new standard, allowing one to set the width and/or height properties.
