そもそもRetinaディスプレイってなに？

Retinaディスプレイとはapple独自の高精細ディスプレイの名称で、
画面解像度が高いことが特徴です。
iPhone 3GSと、初めてRetinaディスプレイが採用されたiPhone 4を比較すると、
画面サイズは同じですが解像度が
iPhone 3GSが320px×480px
iPhone 4が640px×960px
となっています。
画面解像度が2倍に上がっているのですね。

Retinaディスプレイで画像がぼやける理由

上記の通り画面解像度が2倍になったことにより、普通のディスプレイで等倍で表示していた画像が、Retinaディスプレイだと縦横2倍に引き伸ばされた状態で表示されているということになります。
これが原因です。
この現象の対応策はいろいろあるのですが、その中でKoToRiがいいなと思った「Retina.js」というjavascriptを使った対応方法を紹介しようと思います。

「Retina.js」の使い方

Retinaディスプレイ用の画像を用意する

Retina.jsは読み込むだけでRetinaディスプレイのデバイスでアクセスされた時に、別で用意してあるRetinaディスプレイ用の画像を読み込んでくれます。

まずRetinaディスプレイ用の画像として本来の大きさの2倍の大きさの画像を用意します。
その際、ファイル名を「元画像のファイル名@2x.png」のように拡張子の前に「@2x」という文字列を付けます。
例えばファイル名が「kotori.png」の場合、Retinaディスプレイ用の画像は「kotori@2x.png」となります。

ファイルのダウンロード

Retina.jsの「Download zip」ボタンからファイルをダウンロードします。
ダウンロードしたzipを解凍してください！

「Retina.js」の読み込み

解凍したフォルダ内の「js」フォルダの中にある「retina-1.1.0.min.js」を自分のフォルダにコピーしてHTMLに読み込みます。
公式サイトには</body>の直ぐ上に読み込みのタグを入れてくださいと書いてあるのでそうしましょう。

<script type="text/javascript" src="/scripts/retina.js"></script>

パスは適宜変更してください。

これでRetinaディスプレイのデバイスでアクセスされた時に「@2x」が付いたRetinaディスプレイ用の画像を表示してくれます。

普通のディスプレイ

<img src="kotori.png" alt="" />

Retinaディスプレイ

<img src="kotori@2x.png" alt="" />

基本的な使用方法は以上になります。
シンプルでいいね！！

背景画像の対応

上の説明でRetina.jsがimgタグの画像に対応しているのはお分かりいただけたと思います。
じゃあ背景画像もRetinaディスプレイに対応させたい場合はどうしたらいいの？という事になりますね。

結論から言うと背景画像に関してはRetina.js使用しなくてもcssのMedia Queryで対応可能です。
色々説明するよりコード見たら一発だと思うのでどうぞ！！！
「#logo」の背景画像をRetinaディスプレイのデバイスでアクセスされた時に「@2x」が付いた画像に差し替えるコードです。

#logo {
background-image: url('/images/my_image.png');
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
#logo { background-image: url('/images/my_image@2x.png'); background-size: 200px 100px; }
}

「LESS」にも対応

「Retina.js」は「LESS」でも利用できるようになってます！！
「LESS」とは何ぞやって人は下記を参考にしてください。
ASCII.jp：CSSの記述が3倍速くなる「LESS」の使い方

Retina.jsをLESSで使用

ダウンロードして解凍したRetina.jsのフォルダ内の「less」フォルダの中に「retina-1.1.0.less」というファイルがあるのでそのコードを自分のLESSスタイルシートに追加するか、自分のフォルダにコピーしてHTMLに読み込んでください。
すると「.at2x()」の関数が使用できるようになります。
例えば「#logo」の背景をRetinaディスプレイに対応させたい場合はスタイルシートに下記コードを追加します。

#logo {
.at2x('/images/my_image.png', 200px, 100px);
}

上のコードはコンパイル後こうなります。

#logo {
background-image: url('/images/my_image.png');
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
#logo { background-image: url('/images/my_image@2x.png'); background-size: 200px 100px; }
}

まとめ

Retinaディスプレイは画質がすごく綺麗になってすごくいいと思う！！
でもね、対応がめんどくさいよね笑
どんどん新しい便利な技術が生まるのは凄くいいこと。
だけどそれにどんどん対応していかなきゃいけないのがすごく面倒です笑

でもこれがWebという世界なんですよね。

日々精進。これからも頑張ります。