iPhoneなどApple製品に使われているRetinaディスプレイ。
従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから
Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり
特別な対処をする必要がでてきたりします。
そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し
個別に処理させる方法があったので紹介してみます。
※webkitブラウザのみの対応です。
jQueryでRetinaディスプレイを判別して処理を変える方法
Retinaディスプレイかどうかを判別するプロパティは
デバイス上で画像の1pxの単位を何pxとしてレンダリングしているかを見てくれる
————————————–
window.devicePixelRatio
————————————–
によって判別します。
Retinaディスプレイはここで取得する値が「2」になります。
これを使って実際に表示しているデバイスが
Retinaディスプレイかどうか判別するサンプルは以下のようになります。
※表示しているディスプレイがRetinaか、Retinaではないか、下に表示されます。
（webkitブラウザのみの対応なのでIEやFirefoxでは何も表示されません）
これを実行させるスクリプトは以下のようになっています。
（HTMLにはコンテンツ要素id「#container」のみ配置）
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
var retinaSwitch = window.devicePixelRatio;
if(retinaSwitch == 1) {
$('#container').html('Retinaディスプレイではありません');
} else if(retinaSwitch == 2) {
$('#container').html('Retinaディスプレイです');
}
});
</script>
Retinaディスプレイの場合には、
コンテンツ要素id「#container」に「Retinaディスプレイです」のテキストを表示し、
そうでない場合には「Retinaディスプレイではありません」を表示しています。
この様に「window.devicePixelRatio」で取得する値から
Retinaディスプレイを判別して処理を変えることができます。
jQueryを使わずにJavaScriptでシンプルに処理するには
以下のような方法でも可能です。
◆SCRIPT
<script>
if (window.devicePixelRatio == 2){
～Retinaディスプレイの場合の指定～
}
</script>
これらのディスプレイ判別はCSSでの
「-webkit-device-pixel-ratio」でも処理することができ、
MediaQueriesを使って以下のように指定することができます。
◆CSS
@media only screen and (max-device-width: 480px) and (-webkit-device-pixel-ratio:1) {
～Retinaディスプレイ以外の場合の指定～
}
@media only screen and (max-device-width: 480px) and (-webkit-device-pixel-ratio:2) {
～Retinaディスプレイの場合の指定～
}
「window.devicePixelRatio」での取得する値について
Androidではどうなっているか、[to-R]さんの記事でまとめているものもあったので
これらもとても参考になりそうです。
【参考記事】Android端末のdevicePixelRatio[to-R]
ディスプレイによって個別に判別する処理が必要な際に是非。。。