skip to navigation (press enter key)

Viewport: Meta Tag and @viewport CSS Rule

 <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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>