确定小型设备：最大宽度真的比最大设备宽度/ 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">