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]

ディスプレイによって個別に判別する処理が必要な際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから