web-dev-qa-db-ja.com

ピクセル比/密度を検出するためのベストプラクティスは何ですか？

現在、Webサイトでモバイルデバイスの検出にJavaScriptを使用しています。これにより、モバイルユーザーまたはデスクトップユーザーにさまざまなコンテンツを提供できます。

現在、window.devicePixelRatioおよびscreen.widthユーザーがモバイルデバイスを使用しているかどうかを判断するには、次のようにします。

var isMobileScreenWidth = ((screen.width / window.devicePixelRatio) < 768)

768pxは、モバイルまたはデスクトップを定義するポイントであるため、767以下はモバイル、768以上はデスクトップです。

これは完全に機能しますが、最近Firefoxで問題が発生しました。Firefoxをズームインおよびズームアウトすると、window.devicePixelRatio、 そう：

zoom = 30%, window.devicePixelRatio = 0.3
zoom = 100%, window.devicePixelRatio = 1.0
zoom = 300%, window.devicePixelRatio = 3.0

Firefoxでブラウザを拡大表示しているユーザーは、モバイルバージョンのサイトを取得するため、これで問題が発生します。

デスクトップブラウザーとは別のピクセル密度を取得する別の方法またはより良い方法を誰かが知っているのではないかと思いました。

少量のユーザーエージェント検出も使用しますが、モバイルユーザーエージェントの絶えず変化するリストに対応するのは大変な仕事なので、画面解像度とユーザーエージェントの両方に同時に依存することはできません時間。

誰かがこれについて何かアイデアを持ち、それを助けることができれば素晴らしいでしょう。

更新：

私はこれに出会ったばかりです：

window.screen.availWidth / document.documentElement.clientWidth

この簡単な数学はこの投稿で提案されています：

window.devicePixelRatioはIE 10 Mobile？ では機能しません

私はそれをテストし、Firefoxで動作し、問題を解決しましたが、残念ながら今ではChromeで問題を引き起こしています。

Chrome zoom = 100%,
window.devicePixelRatio = 1.0,
window.screen.availWidth / document.documentElement.clientWidth = 3.0

私はすべてのために働く堅実な解決策を見つけることができないようです。

javascriptmobiledevice-detectionpixel-ratio
21
lukehillonline

デバイスのピクセル比を取得するための一般的なソリューションがあります

次のコードは、開始点として_window.devicePixelRatio_を使用します[〜＃〜]が、[〜＃〜]にはwindow.matchMedia() Web API。

これらの機能の両方に対するブラウザのサポートはほぼ完璧であるため、ほとんどのユースケースでうまく機能するはずです。

以下は、この情報を取得する関数です。 もともとPatrickJSによって作成され、GitHub Gistとして公開されています ：

_function getDevicePixelRatio() {
    var mediaQuery;
    var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
    if (window.devicePixelRatio !== undefined && !is_firefox) {
        return window.devicePixelRatio;
    } else if (window.matchMedia) {
        mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
          (min--moz-device-pixel-ratio: 1.5),\
          (-o-min-device-pixel-ratio: 3/2),\
          (min-resolution: 1.5dppx)";
        if (window.matchMedia(mediaQuery).matches) {
            return 1.5;
        }
        mediaQuery = "(-webkit-min-device-pixel-ratio: 2),\
          (min--moz-device-pixel-ratio: 2),\
          (-o-min-device-pixel-ratio: 2/1),\
          (min-resolution: 2dppx)";
        if (window.matchMedia(mediaQuery).matches) {
            return 2;
        }
        mediaQuery = "(-webkit-min-device-pixel-ratio: 0.75),\
          (min--moz-device-pixel-ratio: 0.75),\
          (-o-min-device-pixel-ratio: 3/4),\
          (min-resolution: 0.75dppx)";
        if (window.matchMedia(mediaQuery).matches) {
            return 0.7;
        }
    } else {
        return 1;
    }
}
_

有用なリンク： _MDN - window.devicePixelRatio_ 、 MDN - Window.matchMedia()

CanIUse： _window.devicePixelRatio_ 、 Window.matchMedia()

4
Andrii Verbytskyi