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

【问题标题】：Why CSS Media Query doesn't work on mobile device but yes on Google Chrome device emulator?为什么 CSS Media Query 在移动设备上不起作用，但在 Google Chrome 设备模拟器上却可以？
【发布时间】：2014-06-20 14:09:51
【问题描述】：

从标题来看，我不明白为什么媒体查询可以在 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 的最小和最大分辨率，但这似乎是一个错误，因为......我还不明白

【问题讨论】：

不要这样做maximum-scale=1, user-scalable=no" 不建议这样做，并且会提供非常糟糕的用户体验。
但是通过删除它肯定会无法在移动设备上正确查看？

标签： css mpmediaquery

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

CSS 应如下所示并检查：

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

【讨论】：