CSS媒体查询页面在Chrome移动端调试无响应，窗口缩放正常

嘿，这个问题我之前调试响应式页面时也踩过坑！你遇到的情况几乎可以肯定是缺少viewport元标签导致的。

问题原因 #

Chrome的开发者工具设备模拟模式，是模拟移动端浏览器的行为。如果你的HTML里没有添加viewport元标签，移动端浏览器（包括模拟的）会默认把页面宽度当成桌面端的标准宽度（通常是980px）来渲染，这时候你的@media screen and (max-width: 767px)媒体查询自然不会被触发。而手动缩放浏览器窗口时，你是直接改变了浏览器的实际视口宽度，当宽度小于767px时，媒体查询就正常生效了。

解决方案 #

在HTML的<head>标签里添加这条viewport元标签：

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

这条标签的作用是告诉浏览器：

• 使用设备的实际屏幕宽度作为页面的视口宽度
• 初始缩放比例设为1（不缩放）

添加之后，再打开Chrome的设备模拟模式，你的媒体查询应该就能正常触发了。

额外检查点 #

如果添加后还是有问题，可以试试这几点：

• 刷新页面，清除浏览器缓存（有时候旧的缓存会影响渲染）
• 检查Chrome开发者工具里的设备模拟是否选择了正确的设备尺寸（比如iPhone SE的宽度是375px，肯定小于767px）
• 确认你的媒体查询语法没有错误（不过你手动缩放能生效，语法应该没问题）

内容的提问来源于stack exchange，提问作者auto