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

What are best practices for detecting pixel ratio/density?

提问by lukehillonline

I am currently using JavaScript for mobile device detection on my website, this then allows me to serve different content for mobile or desktop users.

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

Currently I use window.devicePixelRatioand screen.widthto work out if the user if on a mobile device or not, like so:

目前我使用window.devicePixelRatio和screen.width来确定用户是否使用移动设备，如下所示：

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

768pxis the point at which we define mobile or desktop so 767 and below is mobile and 768 and above is desktop.

768px是我们定义移动或桌面的点，所以 767 及以下是移动，768 及以上是桌面。

This works perfectly, but I have recently come across an issue with Firefox, when Firefox is zoomed in and out it changes the window.devicePixelRatio, so:

这工作得很好，但我最近遇到了 Firefox 的一个问题，当 Firefox 放大和缩小时，它会改变window.devicePixelRatio，所以：

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

This now causes me a problem because any users which have their browser zoomed in on Firefox get the mobile version of the site.

这现在给我带来了一个问题，因为任何在 Firefox 上放大浏览器的用户都会获得该网站的移动版本。

I was wondering if anyone knew of a different or better way of getting the pixel density which is separate from desktop browsers.

我想知道是否有人知道获得与桌面浏览器不同的像素密度的不同或更好的方法。

I do use a small amount of User Agent detection as well but because it is a massive job to keep up with the constantly changing list of mobile user agents it is not possible for me to depend on both the screen resolution and user agent at the same time.

我也使用了少量的用户代理检测，但是因为跟上不断变化的移动用户代理列表是一项艰巨的工作，所以我不可能同时依赖屏幕分辨率和用户代理时间。

If anyone has any ideas about this and can help that would be awesome.

如果有人对此有任何想法并且可以提供帮助，那就太棒了。

UPDATE:

更新：

I have just come across this:

我刚刚遇到了这个：

window.screen.availWidth / document.documentElement.clientWidth

This quick bit of math is suggested in this post:

这篇文章中建议了这个快速的数学运算：

window.devicePixelRatio does not work in IE 10 Mobile?

window.devicePixelRatio 在 IE 10 Mobile 中不起作用？

I have tested it and it work in Firefox, and solves my problem, but, unfortunately now causes a problem in Chrome, so:

我已经测试过它并且它在 Firefox 中工作，并解决了我的问题，但是，不幸的是现在在 Chrome 中导致了一个问题，所以：

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

I cannot seem to find a solid solution which works for everything.

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

采纳答案by Amann Malik

You should leverage the manufacturer's hint via the <meta name="viewport" content="width=device-width"/>or @-ms-viewport {width:device-width}feature. It basically exposes the default zoom the device manufacturer considers optimal given the pixel density of the screen. After you do that, when you call window.innerWidthit will give you what your original equation was intended for but without relying on a measurement of pixel density.

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

Avoid relying on window.devicePixelRatiofor anything. Its meaning and the value it returns is currently in a state of flux and anything you make right now based around it will most likely break very soon.

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

Note: Meta viewport only works on Android, iOS, and Windows Phone 8. @-ms-viewportonly works (properly) on IE10 Metro and can interfere with proper Meta viewport behavior on Windows Phone 8.

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

回答by Andrii Verbytskyi

There is a Generic Solution to get device Pixel Ratio

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

Next code uses window.devicePixelRatioas a starting point BUTalso has a fallback based on window.matchMedia()Web API.

下一个代码window.devicePixelRatio用作起点，但也有基于window.matchMedia()Web API的回退。

The browser support for both those features is almost perfect, so this should work great for most of use cases.

浏览器对这两个功能的支持几乎是完美的，因此这对于大多数用例来说应该非常有用。

Here is a function that retrieves this information, originally written by PatrickJS and published as a GitHub Gist:

这是一个检索此信息的函数，最初由 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;
    }
}

Useful links: MDN - window.devicePixelRatio, MDN - Window.matchMedia()

有用的链接：MDN - window.devicePixelRatio，MDN - Window.matchMedia()

CanIUse: window.devicePixelRatio, Window.matchMedia()

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