【Follow up】viewportを理解しよう
viewportは、iOSやAndroidなどのスマートフォンOSのブラウザーが採用している仮想ウィンドウのことで、スマートフォンにおけるWebサイト表示の最適化には欠かせない機能です。
viewportの機能
viewportがどのような機能なのか確認してみましょう。図は、iPhone 3GSのSafariでYahoo! JAPANのトップページを表示したところです（Yahoo! JAPANにはスマートフォン用に最適化されたサイトもありますが、あえてPC用のサイトを表示しています）。
Yahoo! JAPANのPC用サイト
iPhone 3GSの解像度は、320×480pxですので、本来であればページの一部しか表示されないはずですが、実際にはWebページは全体的に縮小され、横いっぱいに表示されています。幅320pxのiPhoneが、viewportによって幅960pxのウィンドウになりきって表示しているのです。不思議な現象ですが、これがスマートフォンのviewport機能です。
viewportの記述方法
viewportの設定は、HTMLのhead要素内にmeta要素を使って記述することで変更できます。
<meta name="viewport" content="プロパティ">
横幅のサイズだけでなく、ユーザーによる拡大・縮小操作の可否や、表示倍率なども表のようにviewportのプロパティで設定できます。
| プロパティ | 説明 |
|---|---|
| width | pxで任意に幅を指定 |
| height | pxで任意に高さを指定 |
| device-width | デバイスのスクリーンの幅 |
| device-height | デバイスのスクリーンの高さ |
| initial-scale | (0 - 10.0)最初の表示倍率 |
| minimum-scale | (0 - 10.0)最小の縮小率 |
| maximum-scale | (0 - 10.0)最大の拡大率 |
| user-scalable | (yes/no)ユーザーに拡大と縮小の許可をするかを設定。yesは有効、noは無効 |
たとえば、viewportサイズを横幅320pxに指定する場合は以下のように記述します。
<meta name="viewport" content="width=320">
viewportのプロパティを複数指定する場合は「,」で区切って記述します。以下は、viewportサイズを横幅320pxにし、最初の表示サイズを1.0倍に指定します。
<meta name="viewport" content="width=320,initial-scale=1.0">
ピンチインとピンチアウトの処理
viewportのプロパティ「user-scalable」は、ユーザーのピンチイン（縮小）／ピンチアウト（拡大）の可否を指定できます。user-scalable=noと指定すればピンチイン／ピンチアウトを無効化できます。
<meta name="viewport" content="user-scalable=no">
ただし、無効にした場合は、当然のことながらユーザーは拡大・縮小ができなくなります。小さな文字で表示されたWebサイトの閲覧に困ることになり、お年寄りや目が不自由な人のアクセシビリティの問題もあります。
このような問題を念頭に、ピンチインとピンチアウトの機能をオフにしてもユーザーが十分に閲覧できる文字サイズや操作できるボタンサイズを考える必要があります。また、HTML5のcanvas要素を利用して作成されたゲームでは、ユーザーが誤って拡大してしまうことを防ぐために、ズーム機能を無効化している場合があります。この場合でもゲームの操作性は損なわないように配慮します。
CSSによる指定
viewportはHTMLのmeta要素を利用して記述しますが、見栄えに関する指定は本来ならばスタイルシートに記述するべきであり、疑問が残るところです。W3Cは現在、CSSにviewportプロパティとして記述するルール作りを進めており、Opera Mobile 11に先行実装されています。
・meta要素での記述
<meta name="viewport" content="width=320,initial-scale=1.0">
・スタイルシートでの記述（Opera Mobile 11の場合）
@-o-viewport {
width : 320px;
zoom:1.0}
著者：菊池 崇（きくち・たかし）
Web Directions East LLC代表。allWebクリエイター塾講師。米国にてマーケティングを専攻修了。貿易会社を経て、allWebにてXHTML+CSS基礎講座、XHTML+CSS中級講座、XHTML+CSS上級講座、microformats講座などの講師。オーストラリア、米国、カナダなどで開催されている世界的に有名なカンファレンス「Web Directions」の日本版である「Web Directions East」の発起人。
