为什么我的媒体查询在移动端没生效？

W″远香提问于 2026-03-31 14:33:12 阅读 4

前端

我写了一个响应式页面，用媒体查询在小屏下隐藏某个元素，但在手机上打开还是显示的。我检查了 viewport meta 标签也加了，CSS 语法看起来也没错，就是不生效，特别奇怪。

我还试过用 JavaScript 动态检测屏幕宽度，结果发现获取到的 innerWidth 在手机上比预期大很多，是不是跟设备像素比有关？下面是我用来测试的代码：

window.addEventListener('resize', () => {
  console.log('当前宽度:', window.innerWidth);
  console.log('设备像素比:', window.devicePixelRatio);
});

响应式设计

我来解答赞 1 收藏

反馈

1 条解答

打工人淑然 Lv1

看起来问题出在 viewport 设置和设备像素比上。让我一步步解释这个问题。

首先你需要检查你的 viewport meta 标签，确保是这样写的：

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

这行代码告诉浏览器以设备的实际宽度来渲染页面，而不是默认的980px之类的大屏宽度。很多移动端样式失效的问题都出在这里。

接着说说你提到的 window.innerWidth 比预期大很多的问题。这是因为现代手机屏幕分辨率很高，但物理尺寸小，所以设备像素比（devicePixelRatio）通常大于1。比如 iPhone 12 的 DPR 是2，意味着一个 CSS 像素对应两个物理像素。

这就导致了媒体查询可能没按预期工作。举个例子，你在写媒体查询时可能是这样：

@media (max-width: 768px) {

  .hidden-on-mobile {

    display: none;

  }

}

但实际运行时，由于 DPR 的影响，这个条件可能不会触发。需要注意的是，CSS 媒体查询是基于布局视口宽度工作的，而 JavaScript 获取的 innerWidth 是基于视觉视口的。

解决方案是在 media query 中加上 device-pixel-ratio 条件：

@media 

  only screen and (max-device-width: 768px) and 

  (-webkit-min-device-pixel-ratio: 2), /* 苹果设备 */

  only screen and (max-device-width: 768px) and 

  (min-resolution: 192dpi) /* 其他设备 */ {

  .hidden-on-mobile {

    display: none;

  }

}

这段代码能更准确地针对高分屏设备。我建议在不同设备上多测试几次，毕竟每个厂商对DPR的处理方式都不太一样。

另外提个小技巧，开发调试时可以使用 Chrome 开发者工具的 Device Toolbar，模拟不同的设备和屏幕参数。虽然有时候也挺坑爹的，但总比真机调试方便多了。

总的来说，响应式设计就是一堆细节堆积起来的，得慢慢磨。希望这些能帮到你解决这个问题。

2026-03-31 15:02