Mobile browser viewports

Published: January 16th 2013by Orde Saunders

The mobile browser viewport is essential to responsive design but it's clouded by two different implementations, both with bugs.

History

When the iPhone was released with its 320x480px screen Apple made the decision to set a virtual viewport of 980px so that the majority of sites built using a fixed layout for a 1024px wide screen would show fully on the screen.

The CSS specifications define media types and the handheld would seem ideal for mobiles but next to nobody was using it, everyone was using screen and, since the spec states Media types are mutually exclusive in the sense that a user agent can only support one media type when rendering a document., choosing to handle screen was the only sensible choice.

Meta tag

So now we have all sites being rendered with a 980px viewport, what about sites designed for a narrow screen? What's required is some way to communicate this fact and Apple settled on a <meta> tag with, what I feel to be, a slightly cumbersome syntax.

@viewport

If has been argued that, as the viewport is presentation, it should live in CSS rather than in HTML so the W3C has come up with the @viewport rule. IE10 is the first browser to support this, albeit with a vendor prefix.

Issues

Unsurprisingly, given the history, there are a few issues with viewports. First and foremost, it exists - which is far from ideal. Secondly there are now two forms for the viewport out in the wild which we will have to support for the foreseeable future.

More practically, there are two browser bugs to contend with:

iOS rotation bug

Up until version 6 there was a bug in iOS¹ where by the viewport wasn't changed when the orientation of the screen was changed. A common, and frequently cargo culted, "fix" for this is to add maximum-scale=1 to the meta viewport. This does force the viewport to adjust on orientation change but it also disables zooming which is a far worse issue than orientation change.

IE10 mobile CSS viewport bug

Windows 8 and its Modern (or Metro) interface it has a snap mode which has a viewport of 400px and, when snapped, IE10 doesn't respect the meta tag, only the CSS viewport. Windows Phone 8 also features IE10 and this supports both the meta tag and the CSS viewport - with the CSS viewport taking precedence. The issue is that the CSS viewport when set to device-width sets to the physical device pixels rather than the virtual viewport used by the meta tag. Microsoft have confirmed this is a bug that will be fixed in the future and have recommended a JavaScript user agent sniffing workaround as a fix, which is more legacy code that will be taken into the future². My recommendation for this is that, unless you have significant volume of Windows Phone 8 traffic, you don't use this workaround and wait for the vendor fix.

Conclusion

Both versions of the viewport will be around for some time and I suspect both will eventually become redundant as the majority of sites adopt a fluid layout. However, if that happens it will not be any time soon so the most future friendly approach is to use both and set them to the device width.