Thinking Ahead – CSS Device Adaptation with @viewport

When we need to adjust a device’s browser viewport, the HTML <meta name="viewport"> tag is usually our go-to solution. But the viewport meta tag is surprisingly “non-normative”––it’s not a formal W3C spec, much less a web standard.

The viewport meta tag was first implemented by Apple in iPhone Safari, then other browser vendors quickly adopted it. It’s widely used today because of the popularity and market share of iOS, Android, and similar platforms for tablet and smartphone devices.

Since the viewport meta tag is strictly for layout, we can say that it rightfully belongs in the CSS. That’s why the W3C is attempting to standardize a new device adaptation method that moves the viewport control from the HTML to the CSS.

The @viewport CSS Rule

With the new @viewport rule we have the same viewport control we have with the meta tag, except that it’s done entirely with CSS. And like with the meta tag, it’s still recommended to set the viewport width using the device-agnostic device-width:

@viewport {
   width: device-width;
}

Nowadays, @viewport is used by many developers because it’s necessary in IE10’s “snap mode,” a Windows 8 feature that lets users drag the browser window to the left or right of the screen in order to use two windows simultaneously. Strangely, IE10 ignores the viewport meta tag when the viewport is smaller than 400 pixels, so sites relying on it are never optimized for those smaller windows. To fix it, developers need to use the device-width example shown above, or define a @viewport rule inside a media query.

Using @viewport with Media Queries

We can use @viewport inside media queries for more precise optimization. For example, the following media query uses it to lay out any viewport narrower than 400 pixels (IE10’s snap mode, for example) to a scaled width of 320px.

@media screen and (max-width: 400px) {
   @-ms-viewport { width: 320px; }
   ...
}

In this example, if a device is in the resolution range of 640px and 1024px, the @viewport rule scales the viewport to 640px.

@media screen and (min-width: 640px) and (max-width: 1024px) {
   @viewport { width: 640px; }
   ...
}

@viewport’s New Descriptors

Although we’re still able to manipulate the zoom and scaling behavior, a few viewport properties––or descriptors, as they’re now called––have changed.

zoom

The zoom descriptor is equivalent to the initial-scale viewport property in the meta tag.

@viewport {
   width: device-width;
   zoom: 2;
}

Like minimum-scale and maximum-scale, there are also descriptors for max-zoom and min-zoom:

@viewport {
   width: device-width; 
   max-zoom: 3; 
   min-zoom: 0.50; 
}

user-zoom

The user-zoom descriptor is equivalent to the user-scalable viewport property.

@viewport {
   width: device-width;
   user-zoom: fixed;
}

Browser Support

Currently, support for @viewport is limited to Opera and IE10. It seems like Chrome (and hopefully others) will be implementing it soon, though, as it’s expected to replace the viewport meta tag as the official web standard in the near future.

For now, @viewport requires vendor prefixing:

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

Of course, we still need to include the viewport meta tag, as that isn’t going away anytime soon. But it doesn’t hurt to start thinking ahead – adding the @viewport rule now simply makes our sites and apps future-friendly.

The post Thinking Ahead – CSS Device Adaptation with @viewport appeared first on Treehouse Blog.