确定小型设备：max-width 真的比 max-device-width / screen.width 更好吗？答案

【问题标题】：Determining small devices: max-width really better than max-device-width / screen.width?确定小型设备：max-width 真的比 max-device-width / screen.width 更好吗？
【发布时间】：2018-04-24 16:02:48
【问题描述】：

在 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，我想知道：

如何使用它来区分移动设备和显示器？

我哪里错了？

【问题讨论】：

参考下面的链接我认为这个链接对你有用。 stackoverflow.com/questions/6850164/…

标签： javascript css mobile responsive-design

【解决方案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">

【讨论】：