densityについて(device pixel radtio)

スマートフォンの表示画面のサイズの仕組み

画面の横幅の表示方法

PCのブラウザでWebページを表示する場合に横幅の寸法はピクセル数で表すことができます。
例えばwidth:980pxとすれば横幅は980pxとなります。

ところがデバイスが変わると困った事が起こります。
解像度が変わると単純にピクセル数だけで比較できなくなるのです。
もういちどここで解像度とは何か復習しておきましょう。

解像度とは

解像度とはビットマップ画像における画素の密度を示す数値のことでppi（ピクセル　パー　インチ）という単位で表されます。
つまり、「ppi」という単位は１インチあたりに何個のピクセルが含まれるかを示します。

例えば、解像度が1ppiだとすると、これは１ピクセルの大きさが１インチにもなる、非常に大きなドットで描かれることになります。
次に、解像度が100ppiだとすると、１インチの中に100個のドットが入ることになります。すなわちそれは1個のドットのサイズが1/100インチということです。解像度が大きくなるとドットひとつのサイズが小さくなるということがわかると思います。

スマートフォンの場合は機種によって解像度がまちまちです。そのため、Webページの制作者が例えば横幅を320pxと決めておいても見るデバイスによっては表示が変わってきます。

iPhon初代 3.5インチ(対角線）解像度は163dpiで320px
iPhone4s 3.5インチ解像度は326dpiで640px
本来ならiPhon初代では320pxの横線は画面いっぱいに見えるがiPhone4sでは半分の大きさに見えることになります。
これではちょっといろいろと不都合がでます。デバイスによって大きさがまちまちで表示されると何かと混乱します。
たとえば、iPhon初代でちょうどよく見られていたサイトが新型のiPhonに変更すると半分の大きさで表示されてしまい、いちいち拡大して見るのも馬鹿らしい。新しいデバイスは何か使いづらいとユーザーは感じてしまいます。

densityについて

そこで考えられた仕組みがdensityです。
解像度160dpiのものをdensity=1とした基準を作りました。density=1のデバイスと同じ大きさになるように調整されます。

dpiとdensityの関係
120dpi density=0.75
160dpi density=1
240dpi density=1.5
320dpi density=2

ビューポート
ビューポートとはこちらのページを参考にしてください。
　
densityに基づいたviewportは次の記述で実行されます。

<meta name="viewport" content="width=device-width">

densityに基づいたviewport=デバイスの画面解像度/densityの値で計算されます。
つまり160dpiの解像度相当の表示に変更されることになります。

densityを使うことでどのデバイスでも制作者の意図した表示の仕方ができるようになっています。