使用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.

希望這可以幫助！