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

16 浏览
0 Comments

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

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

目前我使用window.devicePixelRatio和screen.width来判断用户是否在移动设备上，例如：

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

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

这个方法效果很好，但最近我在Firefox上遇到了一个问题，当Firefox缩放时，window.devicePixelRatio会发生变化，例如：

缩放为30%，window.devicePixelRatio = 0.3
缩放为100%，window.devicePixelRatio = 1.0
缩放为300%，window.devicePixelRatio = 3.0

这现在给我带来了问题，因为在Firefox上缩放浏览器的用户会得到移动版本的网站。

我想知道是否有其他或更好的方法来获取像素密度，以区分桌面浏览器。

我也使用了少量的用户代理检测，但由于移动用户代理列表不断变化，所以同时依赖屏幕分辨率和用户代理是困难的。

如果有人对此有任何想法并能提供帮助，那将非常棒。

更新：

我刚刚发现了这个：

window.screen.availWidth / document.documentElement.clientWidth

这个快速的数学计算是在这个帖子中提到的：

window.devicePixelRatio does not work in IE 10 Mobile?

我已经测试过在Firefox中可行，并解决了我的问题，但不幸的是，现在在Chrome中引起了问题，所以：

Chrome缩放为100%，
window.devicePixelRatio = 1.0，
window.screen.availWidth / document.documentElement.clientWidth = 3.0

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

0