【jQuery】ウィンドウの解像度を取得してRetinaディスプレイを判別する。

Retinaディスプレイに対応させる最適な方法を模索しているのですが、その過程で、jQueryを使ってRetinaディスプレイか否かを判別させようと閃きました。

調べてみると、ディスプレイの解像度を取得してくれる便利なメソッドが既に存在していました。

それが window.devicePixelRatio です。

このjQueryメソッド「window.devicePixelRatio」では、Retinaディスプレイのときは「2」が、そうでないときは「1」が返されます。

実際に簡単に使えるようなコードにすると、以下のようになりますね。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function() {
	var retinaCheck = window.devicePixelRatio;
	if(retinaCheck >= 2) {
		// 返ってくる値が「2」以上。Retinaディスプレイのときの処理。
	}
});
</script>

同じ処理を jQuery に依存せずに JavaScript で書くと以下のようになります。

<script>
if (window.devicePixelRatio >= 2) {
	Retinaディスプレイのときの処理。
}
</script>

ちなみに iPnone 6 Plus のときは「3」が返ってくるので、コード内では「2以上」という式にしています。

他に注意点としては、同じPC環境・同じ端末でも、使用するブラウザによって返ってくる数値が異なることが挙げられます。
Android系のデバイスで、ブラウザによっては「1.5」が返ってくることがありますし、PC環境でもブラウザがOperaの場合「2.25」が返されることもあります。

また Firefox や IE では「window.devicePixelRatio」自体がサポートされていないので、そもそもこのコードではRetinaディスプレイかどうかを判別できません。
Retinaディスプレイに対応する方法の１つとして頭の片隅に入れておくことをお勧めします。