检测像素比率/密度的最佳做法是什么? [英] What are best practices for detecting pixel ratio/density?

问题描述

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

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.

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

Currently I use window.devicePixelRatio and screen.width to work out if the user if on a mobile device or not, like so:

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

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

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

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

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:

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

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

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

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

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.

更新:

我刚刚遇到了这个:

window.screen.availWidth / document.documentElement.clientWidth

这篇文章中推荐了这个快速的数学知识:

This quick bit of math is suggested in this post:

window.devicePixelRatio 在 IE 10 移动版中不起作用?

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

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

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.

推荐答案

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

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.innerWidth it will give you what your original equation was intended for but without relying on a measurement of pixel density.

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

Avoid relying on window.devicePixelRatio for 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.

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

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

这篇关于检测像素比率/密度的最佳做法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！