为何CSS媒体查询无法在所有移动设备上生效？

以下是针对你遇到的问题的具体排查步骤：

• 检查CSS优先级冲突：媒体查询内的样式可能被原有样式的更高优先级覆盖。比如原有样式使用了!important，或者选择器权重更高（如ID选择器#container vs 类选择器.container）。可以在媒体查询的样式中临时添加!important测试（不推荐长期使用），或者调整选择器权重使其高于原有样式，比如用.parent .container替代.container。

• 验证浏览器是否开启桌面站点模式：iPhone13、Pixel7这类设备的浏览器如果默认或手动开启了「桌面站点」模式，会模拟桌面级的视口宽度（通常大于920px），导致你的媒体查询无法触发。请在测试设备的浏览器设置中切换回「移动站点」模式后重试。

• 检查媒体查询语法与位置：确认媒体查询的大括号是否完全闭合，样式语句末尾有没有遗漏分号，避免语法错误导致整个媒体查询块失效。同时确保媒体查询位于所有常规样式之后，这样才能覆盖前面的样式规则。可以用CSS验证工具检查样式表的语法正确性。

• 确认视口meta标签无干扰：虽然你添加的<meta name="viewport" content="width=device-width, initial-scale=1">是标准写法，但要检查HTML头部是否存在重复的viewport标签，或者其他可能影响视口的浏览器私有标签，这些可能会干扰视口的计算逻辑。

• 查看设备实际视口宽度：在测试设备的浏览器控制台中执行console.log(window.innerWidth)，查看当前实际的视口宽度是否确实小于920px。部分设备的系统缩放设置可能会改变逻辑视口尺寸，或者浏览器存在特殊的视口适配规则，这一步能帮你确认媒体查询的触发条件是否满足。

• 放弃使用max-device-width：这个属性基于设备物理屏幕宽度计算，而非用户实际看到的逻辑视口，不同设备的物理像素与逻辑像素比例差异大，容易导致适配混乱，推荐始终使用max-width。

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