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: iPhone