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

Question

我需要使用 JavaScript 查找设备的屏幕宽度，我无法更改 html 并且不想在这样做之前注入(inject) meta viewport 标记。本质上，我需要检测设备宽度是否低于 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 上将 screen.width 除以 window.devicePixelRatio，但在 iOS 上这将是不正确的)。

是否有一种可靠的跨浏览器方式来做到这一点？

Answer 1

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

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

希望这对您有所帮助!