Androidで画像がぼやけるのはなんで

画像の1ピクセルが実際のデバイス上で何ピクセルとしてレンダリングされるかを示す-webkit-device-pixel-ratioという値があります(この値はwebkit系であればwindow.devicePixelRatioに入っています)。
iPhone4ではこの値が2になっていて、今まで通りに画像を表示させると自動的に拡大されてなんかぼんやりしたかんじになってしまいます。

これを避けるには、実際に表示させたいサイズの2倍のピクセルサイズのものを用意して、でも縦横を1/2にして表示させると画像の1ピクセルとデバイスの1ピクセルが1:1対応になって拡大されることなく表示されるようになります。

で、日本のキャリアが販売している多くのandroid端末でこのdevicePixelRatio1.5になっています。意味わかんない。
Lynx
画面を写真に撮ったものなのでわかりにくいですが、上が45×100ピクセルの画像をそのまま45×100ピクセルで表示したもの。下は90×200ピクセルの画像を45×100ピクセルで表示したものです。上はなんか滲んでますが下はきれいに表示されています(ぼんやりしてるのは写真だから)。

身近にあった端末でdevicePixelRatioを調べたところ以下のとおり。

端末 devicePixelRatio
IS02 1.5
IS03 2
xperia 1.5(たぶん)
SH-03C(LYNX 3D) 1.5
005SH 1.5
001HT(Disire HD) 1.5
001DL 1
004HW 1

というわけで表示させたいピクセル数の1.5/2倍のサイズで画像を用意して表示すればぼんやりしないです。

追記

Philosophical Games: Customize Android Browser Scaling with target-densityDpi
WebView | Android Developers

<meta name="viewport" content="width=device-width; target-densitydpi=device-dpi" />でデバイスの1ピクセルに画像の1ピクセルが表示されるようになります(そのぶんページ全てがちっちゃく表示されます)。 via Twitter / shogo: @ku これかな http://darkforge. …


About this entry