webサイト制作の勉強|1月ブログ

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


また、「デバイスピクセル」を「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);
}
}

f:id:yachin29:20150622170415p:plain

f:id:yachin29:20150622170401p:plain





blog.webcreativepark.net
からの抜粋

今後のスマートフォンサイトデザインをどのようにしていけばよいかSNSで見かける悲鳴を拾い上げながらQ&A形式で答えて見たいと思います。

Q.1
iPhone 6の解像度が750×1334でdevice-pixel-ratioが2だとCSS解像度は375×667だけど横幅320pxでデザインしても大丈夫?

A.1
横幅320pxでデザインしても大丈夫。基本最近のスマホ対応では多解像度に対してリキッドでフィットするようにするのが主流。

リキッドの場合ベースデザイン320pxを375pxに広げて表現するのは難しくないが、ベースデザイン375pxを縮めて320pxで表現するのは至難の業なのでスマートフォンバイスでの最小幅である320pxでのデザインは当分続きます。

Q.2
iPhone 6の登場でスマホの横幅は360px以上が主流になるのに320pxでデザインするの?

A.2
iPhone 5sがターゲットデバイスから外れるまで320pxでデザインするのが続くと思う。結果としてAppleが横幅320pxを長い間死守していたことが320pxの呪縛として付きまとう形になった。

Q.3
iPhone 6 Plusのdevice-pixel-ratioは『3』。3倍画像でRetina対応したほうがよいの?

A.3
個人的にはコレまでどおり2倍画像のままでOK。すでに発売されているdevice-pixel-ratioが3のAndorid端末で検証したことがあるが3倍画像のほうが綺麗と認識できるものの、ファイルサイズなどのトレードオフを考えるとそこまで必死に対応することはない。(Web Clipアイコンはsizes="171x171"を追加してもいいかも)

結論
これまで通りでOK。