WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

高解像度ディスプレイへの対応

Retinaディスプレイ

Retinaディスプレイの特徴は画面解像度の高さにある。iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって解像度は320×480ピクセルから640×960ピクセルに、つまり倍になっている。

640×960ピクセルという解像度は「デバイスピクセル(dpx)」と呼ばれ、3.5インチの画面上で表現されるサイズがCSSピクセル(csspx)」と呼ばれています。

ディスプレイの高解像度化により、「デバイスピクセル」と「CSSピクセル」という二つの概念を分けて考える必要がでてきました。

サイトを制作する場合には、ビットマップで画像を作る際は「デバイスピクセル」を、CSSで幅・高さを指定する際は「CSSピクセル」を基準に作って行きます。


f:id:yachin29:20160330005936p:plain



f:id:yachin29:20160307020120p:plain


また、「デバイスピクセル」を「CSSピクセル」で割った数値を「devicePixelRatio」と言います。
例 iPhone5は「デバイスピクセル(画面解像度)」が640px✕1136pxで、「CSSピクセル」が320px✕568pxなので「DevicePixelRatio」が2になります。






f:id:yachin29:20150622170415p:plain

f:id:yachin29:20150622170401p:plain

note.mu