• このエントリーをはてなブックマークに追加

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]

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

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

  • このエントリーをはてなブックマークに追加

Related Posts

Trackback URL

Comments (1)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

SHARE

jQueryでRetinaディスプレイを判別して処理を変える方法

  • このエントリーをはてなブックマークに追加
Categories
Recent Entries
Popular Entries
Hatena Bookmark
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援について
  • NO FUR