css - 为什么 CSS Media Query 在移动设备上不起作用，但在 Google Chrome 设备模拟器上却可以？

Question

从标题来看，我不明白为什么媒体查询可以在 Google Chrome 上的模拟器设备上运行，而在真正的移动设备上却不行。

Html 元标记

<meta name="viewport" content="width=max-width, initial-scale=1, maximum-scale=1, user-scalable=no">

CSS：

@media screen and (min-device-width:640px) and (max-device-width:767px){...}

实际上，我已经为移动设备的屏幕分辨率设置了 640/768/850/1024 的最小和最大分辨率，但这似乎是一个错误，原因....我还不明白

Answer 1

您应该在元视口中应用设备宽度

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Answer 2

CSS 应如下所示并检查：

@media screen and (min-width:640px) and (max-width:767px){...}