确定小型设备:最大宽度确实优于最大设备宽度/屏幕宽度

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 文件的 head 部分中：

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