媒体查询在手机上不生效是怎么回事？

Top丶春景提问于 2026-02-28 09:59:19 阅读 31

前端

我写了一个媒体查询，想在手机上把字体变小点，但在真机上完全没反应。我用的是 @media (max-width: 768px)，本地浏览器模拟器里是好的，一到手机就失效了。

是不是漏了什么 meta 标签？或者写法有问题？下面是我的代码：

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

CSS3 Flexbox

我来解答赞 12 收藏

反馈

1 条解答

Mr-雨涵 Lv1

问题应该出在 viewport 配置上。你猜对了，确实是漏了 meta 标签。

手机浏览器为了兼容那些没做移动端适配的老网站，默认会把页面渲染在一个很宽的“视口”里，通常是 980px 左右，然后再把整个页面缩小塞进你的手机屏幕里。这就导致你的媒体查询读取的宽度一直是那个虚拟的 980px，根本触发不了 max-width: 768px 这个条件。

解决方法很简单，在 HTML 的标签里加上这句 viewport 设置：

加上这行代码，浏览器就会把布局视口的宽度强制设为设备的真实屏幕宽度。这时候你的媒体查询才能正确判断屏幕尺寸。

如果加完之后真机还是没反应，大概率是手机浏览器缓存搞鬼，清一下缓存或者强制刷新（如果是 App 里的 WebView 可能需要杀进程重进）就好了。

2026-02-28 18:03