web-dev-qa-db-ja.com

JavaScriptを使用してデバイスでRetinaサポートを検出する最良の方法は何ですか？

今私はこれを使用しています：

function is_retina_device() {
    return window.devicePixelRatio > 1;
}

しかし、それは単純さです。より徹底的なチェックはありますか？

javascriptjqueryretina-display
44
TK123

私が最近読んだことすべてによると、ブラウザは、resolutionメディアクエリ式に向かって移動しているようです。これは、現在受け入れられている回答で使用されているdevice-pixel-ratioの代わりです。 device-pixel-ratioをフォールバックとしてのみ使用する理由は、それが標準のメディアクエリではないためです。

W3.orgによると：

ワンス・アポン・ア・タイム、Webkitのは、画面の解像度のためのメディアクエリが必要だったことを決めました。むしろ既に標準解像度メディアクエリを使用するよりも、それらは-webkitデバイスピクセル比を発明しました。

ビュー全文

解像度メディアクエリのドキュメント

以来resolution標準化されているため、将来レットの使用将来の校正のための検出の最初のもの。また、高dppxデバイスのみを検出するのか、onlyretina（ Appleのみ）デバイス、私はそれぞれの1つを追加しました。最後に、メモとしてApple検出は単なるユーザーエージェントスニッフィングであるため、dependedonにすることはできません。注：isRetina関数すべての網膜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);
}
41
Adam Merrifield

画像に使用する場合は、 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)); 
        }
    }
32
Juan Castillo

実際には、あなたの質問に使用しているコードは、ちょうど完全にあなただけの近代的なブラウザを気に右場合です。 （参照： http://caniuse.com/#feat=devicepixelratio ）

すべての近代的なブラウザでは、それが実装されていて、古いブラウザでは、ちょうどあなたのより低い解像度の画像を提供することでしょう。私はIE10-は、網膜/高解像度のデバイス上に表示することを期待しないでください。また、ネイティブウィンドウのプロパティを使用するよりも奇妙なJavaScriptでCSSをチェックしていない使用していますか？

ヘック、devicePixelRatioブラウザのサポートは、解像度の仕様よりも優れています。 （参照： http://caniuse.com/#feat=css-media-resolution ）

私たちは1000万人以上の訪問者ヶ月で生産のウェブサイトでそれを使用し、それを使用するために実際には非常に安全だと言うだろう。期待どおりに動作します。

私が変更したいのは関数名だけです。高解像度の画像を読み込む必要があるからといって、技術的には画面が網膜であることを意味しません。 undefined > 1はfalseになりますので、実際には、数値チェックさえ必要ありません。

function is_high_resolution_screen() {
  return window.devicePixelRatio > 1;
}
11
Guido Bouman

devicePixelRatioはまったく信頼できません。あなたは200％に拡大すると、window.devicePixelRatioはあなたに2を返しますが、あなたは網膜ディスプレイ上ではありません。

0
Lee Le