Androidの画面サイズとDPI

前回、Androidではtarget-densitydpiでviewport調整を行えばよいと書きましたが、実際にどのようなサイズになるか具体的な説明をしたいと思います。

ドコモのGALAXY Sではディスプレイサイズが約4.0インチと発表されています。1インチが2.54cmなので約4.0インチは約10.16cmです。ディスプレイにおけるインチサイズは画面の対角線の長さなので次のような画面サイズになります。

GALAXY Sのディスプレイ種類はワイドVGAです。これはディスプレイの縦横比を表しています。wikipediaによるとワイドVGAの縦横比は15:9です。

縦横比からピタゴラスの定理より実際の縦と横のインチサイズが算出できます。

対角線の比率をXとすると次の方程式が成り立ちます。

15^2+9^2=X^2

つまり対角線の比率は

X≒17.5

となります。

つまり、

縦：4/17.5*15≒3.42インチ(8.68cm)
横：4/17.5*9≒2.06インチ(5.23cm)

これでのディスプレイサイズが計算できました。

GALAXY Sにおける画面サイズ

では、target-densitydpiにdevice-dpiを指定した場合、実際には何dpiになるか計算してみます。

<meta name="viewport" content="width=device-width;target-densitydpi=device-dpi">

device-dpiでは実際の解像度(800×480)で描画されます。横だけでみると2.06インチが480pxで描画されるので、233dpiなのがわかります。

これがこのエントリーの目的になるのですが、target-densitydpiでDPIを指定した場合、実際に何pxで描画されるかです。

たとえば、medium-dpi(160dpi)を指定した場合。

<meta name="viewport" content="width=device-width;target-densitydpi=medium-dpi">

横では2.06インチが160dpiで描画されるので

2.06*160=329.6pxです

しかし、実際には320pxで描画されます。(元のディスプレイ仕様が約4.0インチなので正確に計算が出来ず、計算途中で少数第三位を切り上げてるので計算値も大きめになっています)

こういった過程で計算すると概算ですが、指定するdpiから画面サイズを割り出すことができます。画像に関してはさらに、devicePixelRatioが絡んでくるので注意してください。

個人的にはAndroidの画面サイズが謎だったので、これで結構スッキリしました。

次回はAndroidサイトは実際にどういう指定をして、どういう風に作成すればいいのといった実務的な内容について書きたいと思います。

to-Rについて: JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。
書いてる人: 西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア
株式会社トゥーアールについて: 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

最近のエントリー