检测像素比率/密度的最佳做法是什么？

Question

我目前在我的网站上使用 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 does not work in IE 10 Mobile?

我已经对其进行了测试，它可以在 Firefox 中运行，并解决了我的问题，但不幸的是，现在在 Chrome 中出现了问题，所以：

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

我似乎找不到适用于所有情况的可靠解决方案。

Answer 1

您应该通过<meta name="viewport" content="width=device-width"/> 或@-ms-viewport {width:device-width} 功能利用制造商的提示。它基本上暴露了设备制造商在给定屏幕像素密度的情况下认为最佳的默认缩放。完成此操作后，当您致电 window.innerWidth 时，它将为您提供原始方程式的用途，但不依赖于像素密度的测量。

避免依赖window.devicePixelRatio 做任何事情。它的意义和它返回的价值目前处于不断变化的状态，你现在基于它所做的任何事情很可能很快就会崩溃。

注意： 元视口仅适用于 Android、iOS 和 Windows Phone 8。@-ms-viewport 仅（正确）适用于 IE10 Metro，并且可能会干扰 Windows Phone 8 上的正确元视口行为。

Answer 2

有一个获取设备像素比的通用解决方案

下一个代码使用window.devicePixelRatio 作为起点但也有一个基于window.matchMedia() Web API 的后备。

浏览器对这两个功能的支持几乎是完美的，所以这应该适用于大多数用例。

这是一个检索此信息的函数，originally written by PatrickJS and published as a 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()

可以使用：window.devicePixelRatio，Window.matchMedia()