媒体查询在移动端失效但桌面响应式测试正常，该如何解决？

核心原因 #

你使用的min-device-width和max-device-width是基于设备物理像素宽度的查询，现代移动端设备物理分辨率普遍超出320-480px范围，导致真实设备触发不了该规则；而Firefox响应式工具模拟的是CSS视口宽度，不是物理像素，所以能正常生效。

修复步骤 #

将媒体查询中的device-width替换为width，width对应CSS视口宽度，和你设置的viewport标签完全匹配，是当前响应式开发的标准用法：

修改前代码 #

@media screen and (min-device-width : 320px) and (max-device-width : 480px) {
    // code
}

修改后代码 #

@media screen and (min-width : 320px) and (max-width : 480px) {
    // code
}

额外排查项 #

• 检查CSS是否被优先级更高的样式（如内联样式、带!important的规则）覆盖
• 确认viewport标签正确放置在<head>标签内，无拼写错误
• 若需针对横竖屏适配，可在媒体查询中追加and (orientation: portrait)或and (orientation: landscape)

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