Thinking Ahead: CSS Device Adaptation With @viewport

blog_responsive

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.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Guil Hernandez

Guil is the front-end design teacher at Treehouse. You can follow Guil on Twitter at @guilh.

Comments

7 comments on “Thinking Ahead: CSS Device Adaptation With @viewport

  1. Your pricing plans still do not meet your mission “…to bring affordable Technology education to people
    everywhere, in order to help them achieve their dreams and change the
    world.” I’m in India and with the cost of living and currency rates, I’d prefer a price drastically lower than what you currently offer.

  2. When viewport becomes standard on all browsers, is there any point to use anything else? Given the flexibility of it for any device.