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

Good“茜茜提问于 2026-03-13 10:46:20 阅读 3

移动

我写了个简单的响应式布局，用媒体查询针对小屏设备隐藏某个元素，但在手机浏览器上死活没效果。电脑上缩放窗口倒是正常的。

我写的 CSS 是这样的：

@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }
}

HTML 里也加了 viewport 标签：<meta name="viewport" content="width=device-width, initial-scale=1">，但还是不行，到底漏了啥？

我来解答赞 3 收藏

反馈

1 条解答

Mr-兴翰 Lv1

这个问题很常见，先说最可能的原因：

CSS 优先级/覆盖问题

你的媒体查询本身写法没问题，但很可能是其他地方的样式覆盖了它。比如在媒体查询外面你是不是还定义了 .desktop-only { display: block; } 或者类似的？媒体查询的样式如果写在前面，后面又来了个同优先级或更高优先级的样式，就会把 display: none 覆盖掉。

检查一下你的 CSS 文件里有没有类似这样的情况：

.desktop-only {

  display: block;  /* 这个放在后面的话会覆盖媒体查询里的 display: none */

}



@media (max-width: 768px) {

  .desktop-only {

    display: none;

  }

}

解决办法是把媒体查询的样式放后面，或者用 !important 强突一下（临时验证用，长期还是得调整顺序）。

其他可能的原因：

1. 缓存问题 - 手机上可能缓存了旧 CSS，清一下缓存或者在 URL 后面加个版本号试试

2. viewport 标签位置 - 确保它在里且比较靠前，最好是第一个 meta 标签

3. Chrome 开发者工具 - 用手机连接电脑，用 DevTools 看这个元素实际应用了什么样式，一目了然

你先去检查一下 CSS 文件里有没有后定义的覆盖样式，这个十有八九是原因。

2026-03-13 11:01