スマートフォン devicePixelRatio について
2011.01.13
この記事は最終更新日から1年以上が経過しています。
スマートフォンには、画像1pxが実際のデバイス上で何pxとしてレンダリングされるかを示す
devicePixelRatioという値があります。
これの値はwebkit系であれば、window.devicePixelRatioに入っています。
javascriptで出力する場合、
document.write(window.devicePixelRatio);
で出力可能です。
また、cssでは-webkit-min-device-pixel-ratioで指定出来ます。
調べたところiPhone4ではこの値が2になっていて、
今まで通りに画像を表示させると自動的に拡大されて画像がボケて表示されます。
【回避策】その１
これを避けるには、実際に表示させたいサイズの2倍のピクセルサイズのものを用意して、
縦横を1/2にし、css又はHTML等で指定を行い
表示させると画像の1ピクセルとデバイスの1ピクセルが1:1の比率となって
拡大されることなく綺麗に表示されるようになります。
日本のキャリアが販売している多くのandroid端末はこのdevicePixelRatioの値が1.5になっています。(2011年1月現在)
【回避策】その2 metaで回避する。
Viewportを操作するMeta Tag、meta name=”viewport” target-densitydpi
を使用し回避する。
2011年1月時点でのiPhoneでは対応しておらず、Android2.0以上のみに効果があるプロパティとなる。
<meta name="viewport" content="target-densitydpi=device-dpi" />
各dpi指定
device-dpi
low-dpi: 120dpi
medium-dpi: 160dpi
high-dpi: 240dpi
dpi ＝ 1インチ（1平方インチではない）の幅の中にどれだけのドットを表現できるかを表す。（wikipedia引用）
また、CSSで画像を切り替えたい場合はこちらを参照に
