今、私はこれを使っています。
function is_retina_device() {
return window.devicePixelRatio > 1;
}
しかし、その単純さが怖いです。もっと徹底的なチェックはないのでしょうか?
最近読んだ本によると、ブラウザは resolution
メディアクエリ表現に移行しているようです。これは、現在受け入れられている回答で使われている device-pixel-ratio
の代わりとなるものです。なぜ device-pixel-ratio
がフォールバックとしてのみ使われるべきなのかというと、これは標準的なメディアクエリではないからです。
w3.orgによると 昔々、Webkit は画面解像度に関するメディアクエリが必要であると考えました。しかし、すでに標準化されている解像度のメディアクエリを使用するのではなく、-webkit-device-pixel-ratio を考案しました。
解像度」は標準化されているため、将来的にはそれを使って検出するようにしましょう。また、高dppxデバイスのみを検出したいのか、*retina(Appleのみ)デバイスのみを検出したいのかよくわからないので、それぞれ1つずつ追加しています。最後に、Appleの検出はユーザーエージェントをスニッフィングしているだけなので、依存することはできません。注意: isRetina
関数では、すべての Retina apple デバイスが 2dppx を持っているので、1.3 の代わりに 2 の dppx を使っています。
注意 MS Edgeは非整数値でいくつかの問題があるようです。
function isHighDensity(){
return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 1.3));
}
function isRetina(){
return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)').matches)) || (window.devicePixelRatio && window.devicePixelRatio >= 2)) && /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
}
画像に必要ならretinajsを使うか、このコードで検出するのが一般的な対応です。
function isRetinaDisplay() {
if (window.matchMedia) {
var mq = window.matchMedia("only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)");
return (mq && mq.matches || (window.devicePixelRatio > 1));
}
}
実は、あなたが質問で使っているコードは、モダンブラウザだけを気にしているのであれば、全くもって正しいものなのです。(参照: http://caniuse.com/#feat=devicepixelratio)
モダンブラウザにはすべて実装されており、古いブラウザでは解像度の低い画像が表示されるだけです。IE10が高解像度デバイスで表示されるとは思っていません。また、JavaScriptでCSSチェックを使用することは、ネイティブのウィンドウプロパティを使用するよりも奇妙なことではないのでしょうか?
ヘック、devicePixelRatioブラウザサポートは、解像度仕様よりもさらに優れています。(参照: http://caniuse.com/#feat=css-media-resolution)
私たちは毎月1,000万人以上の訪問者がある本番サイトでこれを使用しています。期待通りに動作しています。
高解像度の画像を読み込む必要があるため、技術的に画面が網膜であることを意味しないので、私が変更する唯一のことは、関数名です。実際、undefined > 1
の結果は false
なので、数値チェックは必要ありません。
function is_high_resolution_screen() {
return window.devicePixelRatio > 1;
}