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

Retinaディスプレイ

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

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

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

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

ピクセル（英: pixel、px）
ピクセル（英: pixel）、または画素とは、コンピュータで画像を扱うときの単位。640×480ピクセルの画像は、横640個、縦480個の点を並べて表現されていることを示す。ディスプレイなどのデバイスにおいては、ピクセルを単位として画像を表示する。

解像度（ppi）
画像はすべて、点が集まって表示されていて、1インチ（2.54cmあたり）あたりにどれだけの密度で点が集まっているかを指す数値を『解像度』といいます。
ちなみに単位となっている「ppi」というのはpixel per inch（ピクセル パー インチ）の略です。
画像を綺麗に出力させる為には用途に応じたppiを選ぶ必要があります。

webの場合　　72ppi
印刷物の場合　300~350ppi

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

devicePixelRatio 1とdevicePixelRatio 2の異なる両方の解像度で画像を綺麗に表示するために、メディアクエリを使いコントロールします。その際に用いられるのが、
「-webkit-device-pixel-ratio」です。

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx)  {
#header {
  background-image: url(XXX.png);
}
}