一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

Retinaディスプレイ対応について

先日、Retinaディスプレイ対応のデザインについて議論している時、僕は以前、Retina対応を経験したことがあったので

Retinaディスプレイに対応するときはまず、デザインを2倍の解像度でつくっておいて、CSSでそのサイズの半分の値を指定すればOKなんだぜー」

って今年一二を争うドヤ顔で言い放ちました。

でもよくよく考えたら「なんでこの方法で対応できたんだろう…」、、そんな初歩的な疑問が湧いてきたのです…
よくわからん…


そこで今回は自分の頭の整理のために、Retinaディスプレイ対応デザインについて書きたいと思います。。


まずその恥ずかしい議論の後、さっそく本やネットで調べまくった僕は、以下の超絶素晴らしいサイトにたどり着きました!!

http://www.mdn.co.jp/di/articles/2742/


気づきを与えてくださった画期的な文章↓


スマートフォンの画面サイズで注意したいのは、PCと違い、ディスプレイの実解像度では描画されない点だ。Viewportのwidthにdevice-widthを指定すると、ディスプレイの実解像度ではなく、devicePixelRatioを元に算出されるCSS解像度でサイトが描画される。


ふむ。
これについて自分なりに考えてみました!!


まず、このdevicePixelRatio というのは、デバイスピクセル比のことで、CSSピクセル1pxをデバイスピクセルで何pxとして描画するか表した数値のこと。

上記のサイトにも書いていますが、

Retina対応のiPhoneではディスプレイの実解像度は640×960ピクセルです。
→これはデバイスピクセルの値を示しています。

でも実際にはちゃんと320×480ピクセルのエリアに収まって描画されていますよね。
→こっちはCSSピクセルの値を示しています。


Retinaディスプレイの場合、devicePixelRatio=2になっているので、このように1CSSピクセル=2デバイスピクセルとして描画されておるのですね。
一方、RetinaじゃないiPhone3GとかだとdevicePixelRatio=1なので、1CSSピクセル=1デバイスピクセルとなって違いはありません。

もう開き直ってそういう魔法がかかっているんだーぐらいのイメージで捉えたほうがいいかも笑

下手だけど、イメージ図もかいてみました。
f:id:d_animal141:20130216151823p:plain


だから例えば、
font-size:12pxとCSSで指定したテキストはRetinaディスプレイでは、CSSピクセル12pxのエリアの中に24px分のデバイスピクセルでより鮮明に描画されるんですね。

で、同様に
width:100px,height:100px の画像だったらそのエリアの中にwidth:200px, height:200pxのデバイスピクセルでより鮮明に…

あら??
ここで再び疑問が…


100×100pxの画像を適用したのに、そのエリアに200×200pxの鮮明な画像が適用されるとかいくらなんでもすごすぎじゃね??
普通に引き伸ばされて画像汚くなるんじゃねえ??


そこで再び先ほどのサイトを見るとさらなる気付きが!!
気づきを与えてくださった画期的な文章2↓


devicePixelRatioが高いデバイス向けの画像最適化テクニックがあり、iPhone のディスプレイ名にちなんで"Retina Display対応"と呼ばれることが多い。CSSの描画はCSS解像度で行われるが、画像はディスプレイの実解像度をもとに描画されるという特徴を利用して、高解像度の画像を埋め込むことで画像を鮮明に見せるテクニックだ


なるほど (゚∇゚;)

この特徴があるから前述したように2倍サイズのデザインを作っておいて、それをCSSで半分のサイズに指定して対応してたんですね!!

先ほどの疑問でいうと、
100×100pxの画像を用意して、Retinaディスプレイで100×100pxのエリアに綺麗に描画しようとすると、実際にはdevicePixelRatio=2が適用されることによって、width:200px, height:200pxのデバイスピクセルになる。

font-sizeの時だとそれでよかったが、画像はデバイスピクセルをもとに描画されるという特徴があるので、適用されるのは100×100pxをむりやり縦横2倍に引き伸ばしたクッソ汚い画像になってしまうorz

だから、こうなることを防ぐためにあらかじめ2倍の画像を用意しておいて、それに対してCSSで半分のサイズを指定するのか。


まだ詰めが甘いというか、自信ないところもありますが、なんとかRetinaディスプレイ対応の仕組みを理解できたとおもいます。

素晴らしい商品出してくれるのは嬉しいけど、それを毎回キャッチアップして柔軟に対応するのはなかなか骨が折れますね。。でも楽しい!

がんばろー

小さなことからコツコツと。