A cornerstone of responsive web design is the fluidity of the viewport, which differs significantly between mobile and desktop screens. Traditionally, we manage viewport dimensions using the viewport meta tag.
But there’s a snag. The viewport meta tag isn’t officially sanctioned by the W3C and carries an inconsistent implementation across browsers—originally an Apple innovation in Safari now widely used elsewhere. Such inconsistencies have long bedeviled developers.
The W3C has provided a saving grace by introducing the @viewport rule in CSS.
Traditional Approach
In the past, we would convey viewport dimensions to the browser using the meta tag method like this:
<meta name='viewport' content='width=device-width'>
The New CSS Rule
According to the separation of content from presentation, viewport instructions are more suited for CSS than HTML. The CSS-based @viewport directive introduced by W3C is coded in this manner:
@viewport {
width: device-width;
}
Alternatively, a fixed width can be specified:
@viewport {
width: 640px;
}
The @viewport rule can be combined with @media queries to compress any viewport wider than 960 pixels to 960px as follows:
@media screen and (min-width: 960px){
@viewport {
width: 960px;
}
}
Enhanced Properties
Additional functionalities provided by @viewport include setting default zoom levels and capping the maximum zoom:
@viewport {
width: 960px;
zoom: 1;
max-zoom: 3;
}
To disable zooming entirely, which may impact accessibility and is not generally advised, use the fixed value for the user-zoom property.
Another practical property of @viewport is the ability to confine a webpage to either landscape or portrait mode:
@viewport {
orientation: landscape;
}
Compatibility
Unfortunately, compatibility is presently limited. Only Internet Explorer 10 and Opera support @viewport, and even then, they necessitate the use of the -ms- and -o- prefixes. However, given the widespread existing use of viewport techniques, this rule has the potential for broad and swift adoption in future browser updates.
How important is adhering to standards for you? Is W3C fostering or inhibiting web development? Share your thoughts below.
Image credit: Responsive design concept, window photo by LostBob Photos
