媒体查询在移动端失效，但桌面端正常怎么办？

欧阳爱菊提问于 2026-01-28 18:32:29 阅读 45

前端

我在做一个响应式布局，给移动端写了媒体查询，但手机访问时样式完全没变化。我检查过代码，桌面端缩小窗口到768px以下是可以触发的。尝试过清除浏览器缓存也不行，是不是哪里写错了？

代码是这样的：


@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
    padding: 20px;
  }
}

用开发者工具模拟移动端能正常生效，但真机测试就失效了，连控制台也没报错。是不是移动端需要加meta标签？或者单位用错了？

Flexbox Grid布局动画效果

我来解答赞 5 收藏

反馈

2 条解答

美蓝🍀 Lv1

代码放这了，问题应该不在媒体查询写法上，而是你少了个关键的 meta 标签。移动端浏览器默认是以 viewport 宽度来缩放页面的，如果你没设置：

那手机访问的时候，页面其实是在一个“虚拟视口”里渲染，不会按真实屏幕宽度去匹配媒体查询。桌面浏览器缩放窗口是能触发，但真机上就不对了。

加完这个 meta 标签再测，应该就能生效了。另外提醒一句，有时候手机浏览器缩放状态、UA 判断、甚至第三方插件也会影响表现，建议用原生浏览器测，排除干扰。

2026-02-05 22:08

欢欢（打工版） Lv1

你这个问题是缺了个 meta 标签，移动端浏览器需要它来正确识别视口。在里加这个：

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

加完应该就没问题了，真机再测下。

2026-01-28 20:13