LearnThinking Ahead: CSS Device Adaptation With @viewport

Guil Hernandez
writes on August 6, 2013

Share with your friends


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.


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; 


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.

12 Responses to “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. Interesting stuff. Thanks Guil :)

  3. Thanks for this Guil… As an avid Windows 8 user I wish I would have known about this. Thank you so much!

  4. Very Interesting & for future help…:)

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

  6. 弊社は海外安心と信頼のプラダ 時計 コピーです。2015 新作が満載!皆様を歓迎して当店をご光臨賜ります。ロレックス時計コピー,パネライ時計コピー,ウブロ時計コピー ,ブライトリング時計コピー,IWC時計コピー,フランクミュラー時 計コピー,ショパール時計コピー,フェラーリ時計コピー,グラハム 時計コピー,ハリー ウィンストン時計コピー等。サイトは世界一流ブランド コピー 専門店です。ぜひ一度当店の商品をお試しください。驚きと満足を保証致します。ご利用をお待ちしております。
    ロレックスコピー販売、代引きロレックス時計コピー通販、全て新品、高い品質、激安、送料無料。ロレックス時計コピーなど世界中有名なブランドレプリカを格安で通販しております。N級品スーパーコピーブランドは 業界で最高な品質に挑戦しますロレックコピー,ロレックコピー代引き,ロレック激安,ロレックス偽物 ,最高級ロレックコピーロレックス時計コピー,フェラーリコピー時計,パネライコピー時計,パテックフィリップコピー時計,ヴァシュロン.コンスタンタンコピー時計,エルメスコピー時計,カルティエコピー時計ルイヴィトンコピー、 ロレックスコピー、シャネルコピー、グッチコピー、エルメスコピー、 ボッテガヴェネタコピー、 バーバリーコピー、ミュウミュウコピー、トリーバーチコピー、バレンシアガコピー、ディオールコピー、ブルガリコピー、ブラダコピー、 ドルチェ&ガッバーナコピー、オメガコピー、フランク ミュラーコピー、gagaコピー。古驰拷贝, 靴/サンダル,サングラスコピー欧米O級品オーダー服各種のブランドの服、靴、、財布、腕時計の複製品をかばん一番ブランドliveブランドコピー服,ブランドバッグコピー,ブランド時計,ブランド靴シリーズ欧米O級品コーナーラッピング用品 http://www.okakaku.com/brand-23-copy-0.html

  7. 秋冬物もかなりGOODです!最初はベストから。29081568のモンクレールダウンベストをおすすめ!
    プラダ スーパーコピー,プラダ 財布 コピー,プラダ 新作 財布ブランド財布コピー,ブランド スーパーコピー 財布,プラダ スーパーコピー 財布,シャネル財布コピー,グッチ スーパーコピー 財布,エルメス スーパーコピー 財布,ルイヴィトン長財布コピー,スーパーコピー財布,エルメスコピー財布,各種のブランドはかばんをコピーします偽物ブランド,激安偽物,ブランド財布コピー,エルメス財布コピー,ブランドのコピーブランド財布,ルイ?ヴィトンブランド財布コピー,偽ブランドグッチ財布,D&G,コピー財布偽物,偽物時計コピー,時計,ボッテガベルト,,靴,その他のバッグコピー,ブランド財布激安,ブランド激安販売,偽ブランド激安市場,通販送料無料專門店 ルイヴィトンコピー 児玉店,当店ルイヴィトン コピー 財布、ルイヴィトン コピー バッグ 全MAX80%OFF!期間限定SALE。最短即日発送。送料無料ルイヴィトン コピー,ルイヴィトン コピー 財布,ルイヴィトン コピー バッグ http://www.okakaku.com/brand-8-copy-0-cheap-0-max0-attr0-3-sort_order%20Desc%2cgoods_id-DESC.html

  8. スーパーコピーブランド格安販売店はこちらへ!品々の激安価格に持ったスーパーコピーブランド 代引きの新作はお客様に提供されます。安心、迅速、確実、お客様の手元にお届け致します。★弊社は9年の豊富な経験と実績を持っております。★一流の素材を選択し、精巧な作り方でまるで本物のようなな製品を造ります。★品質を重視、納期も厳守、お客様第一主義を貫きは当社の方針です。★驚きの低価格で商品をお客様に提供致します!★早速に購入へようこそ!
    人気スーパーコピーブランド時計激安通販専門店私達は長年の実体商店の販売経験を持って、先進とプロの技術を持って、高品質のスーパーコピー時計づくりに 取り組んでいます。最高品質のロレックス時計コピー、カルティエ時計コピー、IWC時計コピー、ブライトリング時計コピー、パネライ時計コピー激安販売中商品の数量は多い、品質はよい。海外直営店直接買い付け!★ 2015年注文割引開催中,全部の商品割引10% ★ 在庫情報随時更新! ★ 実物写真、付属品を完備する。 ★ 100%を厳守する。 ★ 送料は無料です(日本全国)!★ お客さんたちも大好評です★ 経営方針: 品質を重視、納期も厳守、信用第一!税関の没収する商品は再度無料にして発送します http://www.brandiwc.com/brand-37-copy-0.html

  9. コピーカルティエ時計,コピーオメガ時計,コピーその他時計の專門店ロレックス、ウブロをはじめとした、様々なスーパーコピー時計の販売?サイズ調整をご提供しております。
    スーパーコピーブランド格安販売店はこちらへ!品々の激安価格に持ったスーパーコピーブランド 代引きの新作はお客様に提供されます。安心、迅速、確実、お客様の手元にお届け致します。★弊社は9年の豊富な経験と実績を持っております。★一流の素材を選択し、精巧な作り方でまるで本物のようなな製品を造ります。★品質を重視、納期も厳守、お客様第一主義を貫きは当社の方針です。★驚きの低価格で商品をお客様に提供致します!★早速に購入へようこそ! http://www.ooowatch.com/kabann/dior/index.html

  10. ブランドスーパーコピーバッグ、財布、時計
    ブランドコピーの専門店スーパーコピー豊富に揃えております、最も手頃ず価格だお気に入りの商品を購入。弊社フクショー(FUKUSHOW)ブランド腕時計、雑貨、小物最新作!エルメス バーキンスーパーコピー時計N品のみ取り扱っていまずのて、2年品質保証。エルメス食器,スーパーコピーブランド激安販売シャネル 財布スーパーコピー,スーパーコピーブランド 財布激安販売エルメス スーパーコピー,スーパーコピーブランド激安販売売スーパーコピーロレックス スーパーコピー,スーパーコピーROLEX激安販売IWC スーパーコピー,スーパーコピーIWC時計激安販売エルメス時計スーパーコピー,スーパーコピーhermes時計激安販売ボッテガ ヴェネタスーパーコピー,スーパーコピーブランド財布激安販売スーパーコピー時計スーパーコピーブランドバッグ時計コピー激安販売 http://www.gowatchs.com/brand-237.html

Leave a Reply

Want to learn more about CSS?

Learn how CSS allows you to apply visual styling to HTML elements with colors, fonts, layouts, and more.

Learn more