32

我目前在我的网站上使用 JavaScript 进行移动设备检测，这样我就可以为移动或桌面用户提供不同的内容。

目前，我使用window.devicePixelRatioandscreen.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

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

4

2 回答 2

24

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

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

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

于 2013-07-03T22:52:05.100 回答
8

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

下一个代码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()

可以使用: window.devicePixelRatio,Window.matchMedia()

于 2019-02-19T16:03:43.113 回答