Chrome DevTools模拟移动端时媒体查询没生效怎么办？

程序员治柯提问于 2026-01-31 23:15:23 阅读 48

移动

用Chrome DevTools模拟iPhone 12调试页面时，媒体查询突然不生效了，明明在桌面模式下正常

比如这段代码：@media (max-width: 768px)在桌面端能正确触发，但切换到移动端模拟器后样式完全没变化

已经尝试过：

@media only screen and (max-width: 768px) {
  body { background: red !important; }
}

还检查了DevTools的覆盖设置，确保了”强制设备缩放”关闭，真实设备测试也出现同样问题

搞不懂是模拟器设置不对还是代码哪里漏了？

移动调试

我来解答赞 5 收藏

反馈

2 条解答

司徒瑞娜 Lv1

试试在 @media 里加上 and (min-resolution: 1px)，移动端模拟器有时对 max-width 解析有问题

@media only screen and (max-width: 768px) and (min-resolution: 1px) {

  body { background: red !important; }

}

2026-02-06 01:16

康佳的笔记 Lv1

这个问题我遇到过，挺常见的。主要是因为移动端模拟时，viewport标签没加或者配置不对。浏览器默认的视口宽度可能跟你的媒体查询不匹配。

先检查下里有没有这段代码：

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

如果没有就加上。有了的话，再确认下标签的属性设置是否正确。

另外，iPhone 12的模拟分辨率可能比768px宽，你可以试试把媒体查询写成@media (max-width: 1024px)测试下。或者在DevTools里切换到更小的设备看看。

如果还是不行，可以试试清一下浏览器缓存（Ctrl+Shift+R），有时候样式文件没更新也会导致这种问题。

希望能帮到你！

2026-02-01 04:08