devicePixelRatioについて調べてみた
なぜそんな設定があるのか?
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