HTMLとCSSにおけるviewportについてのメモ

この文書は、スマートフォンなどに対するウェブページの表示サイズを制御するviewportメタタグ、およびCSSの@viewport規則について、独自に調査した内容を記したものです。以下、メタタグやCSSなどviewportに関わる制御方法を「viewport制御」と総称します。

概要

HTMLのmeta要素による制御

2007年、アップルは同年に発売したスマートフォン「iPhone」とそのOS「iOS」の開発にあたり、内蔵ブラウザー「Mobile Safari」で既存のパソコン向けのウェブページをそのまま縮小して表示することを選んだ。そしてこの実装を制御するためウェブページ制作者に公開した仕様が、HTMLのmeta要素を用いた制御方法、いわゆる「viewportメタタグ」である。

アップルと同様のメタタグによるviewport制御の対応は、2008年にはグーグルのスマートフォン用OS「Android」の内蔵ブラウザー、さらにオペラ・ソフトウェアの「Opera Mobile 9.5」、2010年にはモジラの「Mobile Firefox 1.1」とマイクロソフトの「Windows Phone OS 7.1 Internet Explorer」が続いた。それ以来、スマートフォン向けサイトの制作ではviewportメタタグが広く用いられるようになっている。

CSSによる制御

一方で2011年、オペラ・ソフトウェアはCSSの@規則として「@viewport」規則をW3Cに提案した。同社が同年に開発したモバイル向けブラウザー「Opera Mobile 11」では、viewportメタタグの対応に加えてCSSの@規則による実装を想定したベンダープレフィックスつきの「@-o-viewport」規則に対応している。

また、マイクロソフトは2012年に公開したInternet Explorer 10の開発にあたって、オペラ・ソフトウェアの方法に沿った「@-ms-viewport」規則に対応した。これによりHTMLのmeta要素だけでなくCSSによるviewport制御の可能性に弾みがついた。

現時点では……

2013年末時点でviewport制御の標準化作業が引き続きW3Cで行われているが、この勧告がいつになるかは不透明である。現時点でviewport制御については、ブラウザーの各メーカーが提供する仕様書を基準とする必要がある。

参考資料

アップル

Safari HTML Reference
Safari Web Content Guide: Configuring the Viewport

グーグル

Supporting Different Screens in Web Apps | Android Developers

オペラ・ソフトウェア

viewport メタタグと @viewport 規則 - Dev.Opera
metaタグによる指定のほか、CSSの@viewport規則に言及。

マイクロソフト

Device Adaptation (Windows)
マイクロソフトはIE10でベンダープレフィックス付きでCSSの@viewport規則に対応。

モジラ

Using the viewport meta tag to control layout on mobile browsers - Mozilla | MDN

W3C

CSS Device Adaptation (W3C Editor's Draft)
W3CにおけるEditor's Draft(エディターズ・ドラフト)は、Working Draft(ワーキング・ドラフト)より情報の反映が早く、随時更新されている。
CSS Device Adaptation (W3C Working Draft)
2011年9月に更新されたきり。

WHATWG

MetaExtensions - WHATWG Wiki
WHATWGのWiki。