これまで、あまり高解像度ディスプレイを意識していませんでしたが、仕事でも需要が増してきそうなので、今のうちにRetina対応を謳うjQueryプラグインを試しておこうと思います。

今回試したのは「jQuery Retina Display Plugin」
この手のやつは画像を2枚用意しておいて、高解像度ディスプレイからのアクセスであればそれ用の画像を表示させるみたいですね。

とりあえずメモ

sample.jpg(480×318)とsample-2x.jpg(960×636)の2枚の画像を用意。

とりあえずドキュメントどおりに書いてみました。比較しやすいように2パターン書いておいて、一方にだけ「retina」クラスを指定。

<h1>テストその1</h1>
<div id="test1">
<p>普通</p><img src="img/sample.jpg" width="480" height="318">
<p>Retina</p><img src="img/sample.jpg" width="480" height="318" class="retina">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/jquery.retina.js"></script>
<script>
$(document).ready(function() {
$('#test1 img.retina').retina();
});
</script>

サンプルを作ってipadで確認してみました。拡大すると確かに違いがわかりますね。