Retinaディスプレイに対応させるCSSの書き方

スポンサーリンク

f:id:tasukujp:20140908115347j:plain

はてなブログのカスタマイズでCSSを書いてると見慣れないMedia Queriesがありました。それがコレ。@media (-webkit-min-device-pixel-ratio: 2)

調べてみるとAppleのRetinaディスプレイに対応するためのものらしいのですが、何が違うの?というところで、ピクセルの基本的な話しもあまり知らなかったのでその辺も含めて簡単にまとめてみます。

デバイスピクセルとCSSピクセル

ピクセルという言葉はよく耳にすると思いますが、Webにおいては「デバイスピクセル」と「CSSピクセル」の2種類に分類されます。

デバイスピクセルとはPCやスマートフォンの画面ピクセルのことを指し、通常Webデザイン上で使うピクセルの事をCSSピクセルといいます。Retinaディスプレイが登場する以前は、この2つのピクセル数は同じだったので特に意識する必要はなかったのですが、最近はRetinaディスプレイに限らずAndroidの高精細ディスプレイなどの登場によって一致しなくなってきているそうです。

デバイスピクセル比

デバイスピクセルとCSSピクセルの比率のことです。2つのピクセル数が同じである場合、1つのCSSピクセルを1つのデバイスピクセルで表現するため比率は1:1となりますが、Retinaディスプレイの場合は1つのCSSピクセルを4つのデバイスピクセル(縦2:横2)で表現するので比率は1:2となります。Android端末では1:3の比率も出ています。

今まで等倍で描画されてた画像が2倍のピクセルで描画されるので、それだけ綺麗に表示されるようになるわけです。そのため従来通り作った画像のままだと拡大されてぼやけて見えてしまうため、きれいに表示するには高精細ディスプレイ用の画像を別に作成して画面に合わせて表示する必要があるということですね。

補足

例えばiPhone5の場合は、1,136 x 640ピクセル解像度(デバイスピクセル)ですが、デバイスピクセル比は2なので、CSSピクセルが568 x 320として表示されます。 MacBookPro13インチの場合は、2,560 x 1,600ピクセル解像度なので、CSSピクセルは1,280 x 800と表示されるといった具合です。

Media Queriesの記述

ということでRetinaディスプレイの時に適用するCSSは以下のように記述します。

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .imageclass {
    background-image: url(http://〜);
  }
}

webkit系-webkit-min-device-pixel-ratio: 2とそれ以外min-resolution: 2dppxに対して有効になるようになってます。 デバイスピクセル比が2なので2と指定していますが、1.5と指定してRetinaもAndroidもまとめて対応する方法もあります。

また、linkタグに記述してcssファイルを分ける方法も可能です。

<head>
<link href="default.css" rel="stylesheet" media="(-webkit-min-device-pixel-ratio: 2)">
</head>

以上、ピクセルに関しては結構複雑で途中で全部調べるのを諦めたんですけど最低限のことだけまとめてみました。

参考