devicePixelRatioについて調べてみた

devicePixelRatioとは

1pxの画像をそのディバイス上では何pxで表示するかを指定した設定
webkit系に存在する

なぜそんな設定があるのか?

iPhone3G,3GSの解像度と、iPhone4の解像度の違いから考える

機種 解像度
iPhone3G,3GS 480 x 320
iPhone4 960 x 640

iPhone4は前のiPhoneに比べて解像度が4倍ある。
画面のサイズは3.5インチと同じな為、1pxあたりの大きさがiPhone4の方が小さく敷き詰められている
このことから、同じ5 x 5 の画像を表示しても通常はiPhone4の方が1/2に小さく表示されてしまう。

そのような自体を防ぐ為、1pxあたりの大きさが小さくなったiPhone4では1pxを2pxとして表示されるようにdevicePixelRatioで制御させれている。

縦と横の両方が2倍になることで、1/2に小さくなった画像が元通りの大きさで表示される

devicePixelRatioで起きるトラブル

devicePixelRatioのおかげて大きさは元通りになるが、小さく表示された画像を大きくしてしまうのでiPhone4では画像がぼやける。。。(´・ω・`)

対応策

iPhone4の解像度で画像を作り、html,css側で高さ、幅を制御

・メリット
 画像が1枚で済むので楽
・デメリット
 3G回線だとおもい。。

JS等で動的に表示する画像を書き換える

・メリット
 ディバイスに合わせて画像をロードさせられる
・デメリット
 だし分けが難しい

画像を使わず表示させる(CSSを駆使する or SVGを利用)

・メリット
 拡大、縮小しても変化なし
・デメリット
 複雑な画像は用意できない

参考

詳しい実装はKayacさんのブログを参照
http://design.kayac.com/topics/2010/08/iphone4-retina-web.php