マルチデバイス対応に必須な画面サイズ調整に必要なのは、dpiスケーリングとViewportである。
①dpiスケーリング
iPhone 3GS は480×320、iPhone 4は960×640と解像度が縦横2倍も違うのに、特に設定しなくてもWebサイトが2倍小さくなったりしないのは、iPhoneやAndroidなどのスマートフォンブラウザが、自身の画面解像度を認識し、自動スケーリングしていることで実現している。
※特に指定しない場合、そのWebサイトは160dpiを想定して制作されていると見なされる（160dpiは、ほぼiPhone 3GSの解像度）。
スマートフォンでは、端末がそれぞれ自分の解像度を把握しており、【表1】のようなグループに分けられ、【表2】のような自動スケーリングの挙動をとる。
| グループ | 主なデバイス |
|---|---|
| mdpi(160dpi) | HT-03A,DELL Streak,Optimus Pad,XOOM,iPhone 3GS |
| hdpi(240dpi) | Xperia arc,Galaxy S,Xperia SX |
| xhdpi(320dpi) | ISO3,Galaxy Nexus,iPhone 4 |
| xxhdpi(480dpi) | HTC J butterfly |
| グループ | 主なデバイス |
|---|---|
| ldpiの端末 | 0.75倍に縮小して表示（物理3pxで論理4ｐｘを表示） |
| mdpiの端行 | スケーリングなし（物理ピクセルと論理ピクセルが1：1対応） |
| hdpiの端末 | 1.5倍に拡大して表示（物理3pxで論理2ｐｘを表示） |
| xhdpiの端末 | 2倍に拡大して表示（物理2pxで論理1ｐｘを表示） |
| xxhdpiの端末 | 3倍に拡大して表示（物理3pxで論理1ｐｘを表示） |
※「論理ピクセル」はCSSやJavaScriptから参照できる値、「物理ピクセル」は液晶画面のピクセル数を指す。
なお、「160dpiを基準として何倍になるか」というのを手持ちの端末で調べるには、【コード1】のJavaScriptを実行すればよい。
【コード1：端末のスケーリングの数値を調べる】
document.write(document.documentElement.clientWidth);
</script>
HTML の適当な箇所に挿入すれば、Android/iPhoneなどWebKit系ブラウザでは1.5 や2 などの数値が表示される。
②Viewportの設定
Viewportとは、AndroidやiPhoneにおける、仮想のブラウザウィンドウのようなもので、
スマフォ においてブラウザは常に全画面表示されるが、ウィンドウサイズの挙動はViewportによって決められる。
| 属性 | 内容 | 値 |
|---|---|---|
| width | 仮想ウィンドウであるViewportのサイズ幅を指定 | ・デフォル値は980。 ・指定できる値は『200～1000px、device-width（その端末の幅ピクセル数（dpiスケーリング後の論理ピクセル数）がセットされる。）』。 |
| height | 仮想ウィンドウであるViewportのサイズ高を指定 | ・デフォル値は、『横幅とのアスペスト比から計算される値』となる。 ・指定できる値は『200～1000px、device-height（その端末の幅ピクセル数（dpiスケーリング後の論理ピクセル数）がセットされる。）』。 |
| initial-scale | 倍率の初期値を指定する。 これを指定しない場合、ページを開いた直後には、Viewportが画面に収まるように縮小して表示される。 |
・initial-scale=1を指定すると、自動で拡大・縮小がされなくなる。 ・指定可能範囲は『minimum-scale,maximum-scale』の範囲。 |
| minimum-scale | ユーザがピンチイン・ピンチアウトして縮小できる倍率を制限できる。 | デフォル値は0.25で、指定可能範囲は「0より大きく、10まで」の値。 |
| maximum-scale | ユーザがピンチイン・ピンチアウトして拡大できる倍率を制限できる。 | デフォル値は1.6で、指定可能範囲は「0より大きく、10まで」の値。 |
| user-scalable | noを指定すると、ピンチイン・ピンチアウトしても、拡大・縮小できなくなる。 | デフォル値はyesで、数値指定も可能（yes＝1、no＝0）。 |
◎実際の使用例【コードA】
上記使用例は、コンテンツの横幅をデバイスの横幅に設定し、ページを開いた瞬間は倍率1で表示します。
ピンチイン・アウトもできますし、比率も見やすいため使っているサイトが多い例です。
③レスポンシブWEBデザイン
2.) メディアクエリー
この２つを使い、コーディングしていきます。
1.) viewport
⇒上記の【コードA】をコーディングします。
2.メディアクエリー
| デバイス | サイズ |
|---|---|
| スマホ縦 | 320px〜479px |
| スマホ横、タブレット | 480px〜767px |
| タブレット | 768px〜1023px |
| PC | 1024px〜 |
| デバイス | ディスプレイ解像度 | ブラウザ解像度 |
|---|---|---|
| iPhone 3Gs | 320px × 480px | 320px x 480px |
| iPhone 4s | 640px × 960px | 320px x 480px |
| iPhone 5s | 640px × 1136px | |
| iPhone 6 | 750px × 1334px | |
| Galaxy S4 | 1080px × 1920px | 360px × 568px |
| Nexus 7 | 1200px × 1920px | 600px × 960px |
| iPad Air | 1536px × 2048px | 768px x 1024px |
◎レスポンシブwebデザインの指定方法の一例
[HTML]
[CSS]
}
@media screen and (min-width:768px){
}
@media screen and (min-width:1024px){
}
