使用JavaScript查找高清设备的屏幕宽度

Question

我需要使用JavaScript找到设备的屏幕宽度，我无法更改html并且不想在执行此操作之前注入元视口标记。 基本上我需要检测设备宽度是否低于600px（以CSS像素为单位）。

我已经看到了各种 推荐，但遗憾的是我在iOS Safari和默认Android浏览器之间遇到了不同的行为：

Command                                           iPhone4     GalaxyS3
------------------------------------------------------------------------
window.devicePixelRatio                           2           2      
window.innerWidth                                 982         626  
window.outerWidth                                 326         720
screen.width                                      320         720 
screen.availWidth                                 320         720  
matchMedia('(max-width: 599px)').matches          false       false
matchMedia('(max-device-width: 599px)').matches   true        false

不幸的是，上述值的不一致意味着我似乎无法使用JavaScript（例如，我可以通过Android上的window.devicePixelRatio来划分screen.width，但这在iOS上是不正确的）。

有可靠的，跨浏览器的方式吗？

Answer 1

您可以尝试使用Verge视口实用程序。 它是一个开源库。 然后你可以简单地使用：

$.viewportW() // Get the viewport width in pixels.

希望这可以帮助！