iPhone6のWEB制作

本日iPhone6が発売になりました。
WEB制作を生業としている私も増加した解像度をWEBブラウザ上で表示するのか気になるので調べてみた。

結論から言うと
iPhone 5はモニタ解像度は幅640pxをdevice-widthが320px(320pxのふりをして)表示します。
iPhone 6はモニタ解像度は幅750pxをdevice-widthが375px(375pxのふりをして)表示します。
iPhone 6 Plusは解像度がフルHDなので幅1090pxをdevice-widthが414px(414pxのふりのふりをして)表示します。

iPhone 5やiPhone 6の場合はdevice-pixel-ratioが2.0なので単純に2分の1で理解できるのですが
iPhone 6 Plusはdevice-pixel-ratioが3.0なのでdevice-widthは3分の1の360px(一桁四捨五入)と思っていたので不思議に思っていたが
PaintCodeによると1.15の縮小補正が入るので414pxでいいらしい。

ややこしい。

ちなみに同じく解像度が1090pxでdevice-pixel-ratioが3.0の「Sony Xperia Z」や「HTC One X」は普通に3分の1(360px)です。

Tags:

トラックバック

コメントを書く