RetinaディスプレイとWEBページ

iPhone 4
Photo:iPhone 4's Retina Display v.s. iPhone 3G By Yutaka Tsutano

 iPhoneやiPadに搭載されているRetinaディスプレイ。液晶のドットを肉眼で識別する事がほぼ不可能で、紙のような美しさを誇るディスプレイです。しかし、このRetinaディスプレイにはWeb製作者に対する落とし穴が隠されているのです。

Retinaディスプレイとは

 ここで、Retinaディスプレイについておさらいしておきましょう。
Retinaディスプレイとは (Retina-display) レティーナディスプレイ, レティナディスプレイ: - IT用語辞典バイナリ

ブラウザとRetina

 iPhoneのRetinaディスプレイの解像度は960×640です。しかし、ここには落とし穴があって、iPhoneのブラウザの解像度は480×320 なのです。これは、実際にiPhoneの画面サイズで960×640のWebページを表示すると小さくて不便なので、iPhone側が480×320の画面サイズをエミュレートした結果です。これがどうして落とし穴なのかというと… iPhone向けのWEBサイトで画像をそのまま使うと、ディスプレイの解像度と適合していないためボヤけて表示されてしまうのです。

実例

20130422-225421.jpg
 この画像は縦横300pxにしてあるので、普通のディスプレイでは縦横300pxで表示されますが、Retinaディスプレイでは縦横600pxを使って縦横300pxの画像を表示-つまり、液晶の4ドットで1pxを表示していることになります。
20130422-225501.jpg
 つぎに、こちらの画像はRetinaディスプレイに最適化してあります。同じ300pxの幅にしてありますが、画像自体は600pxなのでRetinaディスプレイではくっきりと表示されます。同じ記事をPCとiPhoneで見比べて見ましょう。

どうすれば

 Retinaディスプレイに最適化するにはどうすれば良いのか?方法は簡単で、表示したいサイズの2倍の画像を用意し、CSSなどでwidthを本来の画像の半分にすれば良いのです。上の例だと、300pxの画像を width:300px; で表示するのではなく、600pxの画像を width:300px; で表示させるのです。この設定をすると、Retinaディスプレイでは1ドット1pxでくっきりと表示されます。ただ、サイズの大きい画像を小さく表示させた場合、普通のディスプレイでは画像が見にくくなる事もあるのでデバイスごとに画像を置き換えるなどの対策が必要かもしれません(流石に、ここまではやらなくて良いと思うのですが…)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>