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

Question

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

我见过various recommendations但不幸的是我在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上会出错）。< / p>

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

Answer 1

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

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

希望这有帮助！