確定小型設備：最大寬度真的比最大設備寬度/ screen.width好嗎？

Question

檢測javascript中小型設備的有效方法是什么？

我嘗試通過媒體查詢來做到這一點，並且測試了max-width和max-device-width 。

大家都說應該使用max-width 。

但是在我使用Moto G5的Chrome進行的測試中， max-device-width表明移動設備更好：

window.innerWidth: 980 // could be a monitor
window.innerHeight: 1394

screen.width: 360 // small, indicates a mobile device
screen.height: 640

window.devicePixelRatio: 3

(min-width: 500px): true
...
(min-width: 1200px): true // could be a monitor

(min-device-width: 300px): true
(min-device-width: 400px): false // small, indicates a mobile device

min-device-width似乎與screen.width相對應。 兩者都將移動設備與監視器區分開。

由於每個人都建議使用max-width所以我想知道：

您如何使用它來區分移動設備和顯示器？

我哪里錯了？

Answer 1

應使用window.innerWidth / min-width / max-width 。 screen.width是整個屏幕的寬度，可能大於窗口的寬度。

為了從window.innerWidth / min-width / max-width獲得可用的值，您必須將其放在html文件的頭部：

<meta name="viewport" content="width=device-width, initial-scale=1">