<meta name="viewport" content="width=device-width">

Apple created the viewport meta tag as a quick-fix hack, so that sites designed for iPhone’s smaller screen would be readable at 100% zoom. Most small-screen devices (including iPhone) force the layout viewport to equal the visual viewport – by zooming out – so sites that don’t use media queries (non-responsive) can be seen at full-width. The result is tiny, unreadable text, but an easily scannable page that can be zoomed and scrolled.

Although setting the layout viewport may be beneficial for non-responsive sites, it is critical for responsive sites, to ensure that media queries are respected and content is readable without zooming.

The viewport meta tag’s content attribute has six properties, but we only need one: the width property can be set in to a pixel value for non-responsive sites, or, the width-agnostic device-width if your site is responsive. The other five property values are inferred, such as initial-scale = 1.0 and user-scalable = yes – this gives the least restrictive settings possible, while allowing the most flexibility.

Although adopted by other browser vendors, the viewport meta tag was never standardized. Opera’s proposal, the CSS @viewport rule, moves viewport control (appropriately) to CSS, and is becoming a standard – meaning you should use it, especially since IE10, in “snap” mode, has dropped support for the viewport meta tag in favor of the @viewport rule.

Let’s have a look:

@-ms-viewport { width: device-width; } @viewport { width: device-width; }

This will do for IE10 snap mode what our viewport meta tag does in other browsers. Although Opera Mobile 11 and 537.17 WebKit browsers and newer support their own prefixed versions, at the moment, they also support the viewport meta tag – so no need to use @-o-viewport or @-webkit-viewport. If other browser vendors maintain backwards compatibility for the viewport meta tag, -ms is the only vendor prefix we’ll need.

Conclusion

Make sure you use both the viewport meta tag and @viewport CSS rules, whether your site is responsive or not.

In depth

• W3C – CSS Device Adapt
• iOS Developer Library – viewport meta tag explained
• iOS Developer Library – Configuring the Viewport
• PPK – A tale of two viewports — part two
• PPK – A pixel is not a pixel from Fronteers 2012, Oct 4th (video and slides)
• Max Firtman – Windows 8 and Microsoft Surface: IE10 meets modern mobile HTML5 (see “Snap mode and the viewport problem”)
• Tim Kadlec – IE10 Snap Mode and Responsive Design
• Web Designer Wall – Viewport Meta Tag for Non-responsive design