tamlog

主にwebのフロント回り たまに登山

devicePixelRatioとは?

スポンサーリンク

「iPhone4でwebサイトを見るとなんだかモヤっと見えるよ?」 って言われたことありませんか? 「iPhone3GSとiPhone4ではiPhone4の方が解像度が高いからキレイに表示さるはずなのに…」 と思っていたのですが、実は違ったんですね。

たしかにiPhone3GSの解像度は480x320pxで iPhone4の場合は960x640pxで解像度が高いのですが、 実際に表示されているデバイスの画面サイズは480X320pxです。 webkitの場合 高解像度のiPhone4の場合でもiPhone3GSと同じように表示させるように480X320pxで見れるように調整してくれているんです。

それが「devicePixelRatio」というプロパティでデバイスごとにピクセル比率をどうするかを決める値です。

iPhone3GSは1 iPhone4は2 なので単純に2倍の表示になってしまいます。 ただし表示画面は320pxなのでちょっとわかりずらいですが、 画像は倍に引き延ばしているのでもやっとして見えるんですね。