web creators特別号

いますぐ悩みが解決する！ Webデザイン仕事で役立つ54のアイデア

スマートフォンサイト 6-07
表示サイズ調整の要となるViewportの設定

スマートフォンやタブレットでは、画面サイズも解像度も2倍以上の開きがあり、これまでのPCのノウハウをそのまま使うことができない。ここでは、表示サイズ調整の要になるdpiスケーリングとViewportについて見てみよう。

解説／馬場孝夫（ビヨンド・パースペクティブ・ソリューションズ株式会社）

BROWSER iOS…5over　Android…2.2over

マルチデバイス対応に必須な画面サイズ調整

従来のPC 向けサイトでは、ディスプレイサイズや解像度に極端な差はなく、幅1024px・96dpiなど固定値をターゲットにして問題なかった。しかし、スマートフォンやタブレットが普及してきた現状では、固定値だけで対応はできなくなっている。その対応策として挙げられるのが、dpiスケーリングとViewportである。

dpiスケーリング機能

たとえば、iPhone 3GS は480x320、iPhone 4は960x640と解像度が縦横2倍も違うのに、特に設定しなくてもWebサイトが2倍小さくなったりしないのを不思議に思ったことはないだろうか。

これは、iPhoneやAndroidなどのスマートフォンブラウザが、自身の画面解像度を認識し、自動スケーリングしていることで実現している。

なお、特に指定しない場合、そのWebサイトは160dpiを想定して制作されていると見なされる（160dpiは、ほぼiPhone 3GSの解像度）。

AndroidやiPhoneなどのスマートフォンでは、端末がそれぞれ自分の解像度を把握しており、【01】のようなグループに分けられる。

これにより、【02】【03】のような挙動になる。ちなみに「論理ピクセル」はCSSやJavaScriptから参照できる値、「物理ピクセル」は液晶画面のピクセル数を指す。

なお、この「160dpiを基準として何倍になるか」というのを手持ちの端末で調べるには、【04】のJavaScriptを実行すればよい。


【01】このグループはAndroidでの名前だが、便宜上iPhoneもグループに入れている。なお、これはあくまでも一例だ（参考: http://techracho.bpsinc.jp/baba/2011_06_21/3575）。


【02】グループごとの挙動。


【03】【02】の挙動イメージ。グループによって、それぞれこのような比率となる。


【04】HTML の適当な箇所に挿入すれば、Android/iPhoneなどWebKit系ブラウザでは1.5 や2 などの数値が表示される。

Viewportとは

Viewportとは、AndroidやiPhoneにおける、仮想のブラウザウィンドウのようなものである。

WindowsやMacと違い、AndroidやiPhone においてブラウザは常に全画面表示されるが、ウィンドウサイズの挙動はViewportによって決められる。

【05】のJavaScriptを実行してみよう。するとPCではウィンドウサイズ、AndroidやiPhoneでは980が表示されるはずだ。つまり、スマートフォンでは、仮想的に980pxのブラウザで閲覧していることになる。

ではここで、仮想のウィンドウをリサイズしてみよう。その場合、headタグ内に、【06】のmetaタグを入れればいい。これで、【05】のJavaScriptを実行すると、数値が変わったのが確認できる【07】。


【05】


【06】


【07】左が980px、右が400pxの場合となる。少し見づらいが、左は980、右は400と表示されている。

dpiスケーリングと拡大・縮小の違い

dpiスケーリングは、Viewportへのレンダリング前に実施される。論理ピクセルそのものが変化するため、CSSやJavaScriptが参照するピクセルも、液晶画面の物理的なピクセルとは異なるものになる。

一方、2本指ピンチイン・ピンチアウトで操作するような「拡大・縮小」は、レンダリングされたViewportそのものを拡大・縮小している。

Viewportで指定できること

ではViewportでは何が指定できるのかについて、おもなものを取り上げて説明しよう。

width, height

仮想ウィンドウであるViewportのサイズを指定する。前述の通り、widthのデフォルト値は980。

特殊な値として、device-width/device-heightを指定すると、その端末の幅ピクセル数（dpiスケーリング後の論理ピクセル数）がセットされる。 initial-scale

initial-scale

倍率の初期値を指定する。これを指定しない場合、ページを開いた直後には、Viewportが画面に収まるように縮小して表示される。なお、initial-scale=1を指定すると、自動で拡大・縮小がされなくなる。

minimum-scale,
maximum-scale

ユーザがピンチイン・ピンチアウトして拡大・縮小できる倍率を制限できる。

user-scalable

noを指定すると、ピンチイン・ピンチアウトしても、拡大・縮小できなくなる。

target-densitydpi

Androidでのみ動作する。low-dpi,medium-dpi, high-dpi, device-dpiの他、70 ～400の数値を指定することも可能（参考:http://developer.android.com/reference/android/webkit/WebView.html）。

先ほど160dpiを基準として自動dpiスケーリングされると解説したが、targetdensitydpiは、この基準dpiを変更するのに利用する【08】【09】。

なお、Android 4.0.4などいくつかのバージョンの標準ブラウザでは、device-dpiを指定したページを表示すると、その後別ページに行ってもdevice-dpi指定が解除されないバグがある。そのため、デフォルト動作を希望する場合もmedium-dpiを指定しておくのが無難だ。

設定例

最後に、Viewportの設定例を紹介する。

(1) 幅1280pxに最適化して作ったWebサイトを、そのままデザインを崩さず利用したい場合【10】。

(2) (1)で、デフォルトでは縮小せず、スクロールさせたい場合【11】。

(3) スマートフォン専用に幅640pxで作ったWebサイトで、無駄な左右スクロールや拡大縮小をさせたくない場合【12】。

(4) Android専用で、画面サイズをぴったり物理ピクセルで使いたい場合【13】。

このような設定が実際のスマートフォン対応ではよく記述されている。ユーザーの使い勝手を考えながら、適切なViewportの設定を行おう。


【08】上記のように指定すると、240dpiを基準としてdpiスケーリングされるようになる。


【09】上記のように指定すると、すべてのAndroid端末でスケーリングが無効になる。物理ピクセル単位で制御したい場合などに利用できる。


【10】


【11】


【12】


【13】


[目次に戻る]

 

【本記事について】
2013年1月29日発売のweb creators特別号「いますぐ悩みが解決する! Webデザイン 仕事で役立つ54のアイデア」から、毎週記事をピックアップしてご紹介! 近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアが満載です。


※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。