「論理ピクセル」と「物理ピクセル」（表示サイズ調整の要となるdpiスケーリングとViewport）

マルチデバイス対応に必須な画面サイズ調整に必要なのは、dpiスケーリングとViewportである。

①dpiスケーリング

iPhone 3GS は480×320、iPhone 4は960×640と解像度が縦横2倍も違うのに、特に設定しなくてもWebサイトが2倍小さくなったりしないのは、iPhoneやAndroidなどのスマートフォンブラウザが、自身の画面解像度を認識し、自動スケーリングしていることで実現している。

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

スマートフォンでは、端末がそれぞれ自分の解像度を把握しており、【表1】のようなグループに分けられ、【表2】のような自動スケーリングの挙動をとる。

※「論理ピクセル」はCSSやJavaScriptから参照できる値、「物理ピクセル」は液晶画面のピクセル数を指す。

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

【コード1：端末のスケーリングの数値を調べる】

<script>
    document.write(document.documentElement.clientWidth);
</script>

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

②Viewportの設定

Viewportとは、AndroidやiPhoneにおける、仮想のブラウザウィンドウのようなもので、
スマフォ においてブラウザは常に全画面表示されるが、ウィンドウサイズの挙動はViewportによって決められる。

◎実際の使用例【コードA】

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

上記使用例は、コンテンツの横幅をデバイスの横幅に設定し、ページを開いた瞬間は倍率1で表示します。
ピンチイン・アウトもできますし、比率も見やすいため使っているサイトが多い例です。

③レスポンシブWEBデザイン

1.) viewport
⇒上記の【コードA】をコーディングします。

2.メディアクエリー

◎レスポンシブwebデザインの指定方法の一例
[HTML]

<meta name=“viewport” content=“width=device-width,initial-scale=1.0″ />

[CSS]

media screen and (min-width:480px){
}
@media screen and (min-width:768px){
}
@media screen and (min-width:1024px){
}