「論理ピクセル」と「物理ピクセル」(表示サイズ調整の要となる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】のような自動スケーリングの挙動をとる。

【表1:dpiによるスマフォグループ分類】
グループ 主なデバイス
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

 

【表2:スマフォグループごとのスケーリングの挙動】
グループ 主なデバイス
ldpiの端末 0.75倍に縮小して表示(物理3pxで論理4pxを表示)
mdpiの端行 スケーリングなし(物理ピクセルと論理ピクセルが1:1対応)
hdpiの端末 1.5倍に拡大して表示(物理3pxで論理2pxを表示)
xhdpiの端末 2倍に拡大して表示(物理2pxで論理1pxを表示)
xxhdpiの端末 3倍に拡大して表示(物理3pxで論理1pxを表示)

※「論理ピクセル」は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によって決められる。

 

【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】

 <meta name=”viewport” content=”width=device-widthinitial-scale=1.0 />

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

レスポンシブWEBデザイン

1.) viewport
2.) メディアクエリー
この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]

<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){
}

About

You may also like...

Your email will not be published. Name and Email fields are required