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制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。