求助：CSS媒体查询在浏览器正常，移动端真机无法生效

开发者阿泽

2026-8-14

解决移动设备媒体查询不生效的问题

以下是几个排查和解决的方向：

添加viewport元标签
这是移动设备媒体查询失效最常见的原因。移动浏览器默认会把页面渲染成桌面端宽度（通常是980px）再缩放显示，导致你的max-width:500px媒体查询不会触发。
只需在HTML的<head>标签里加入这段代码：
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
它会告诉浏览器使用设备的实际屏幕宽度作为页面宽度，并且初始缩放比例为1，这样媒体查询就能正确匹配设备宽度了。
检查CSS样式优先级
看看是否有其他更高优先级的样式覆盖了你媒体查询里的规则。比如如果桌面端的#education-table td样式加了!important，或者有更具体的选择器（比如.container #education-table td），都会导致媒体查询里的样式不生效。
可以临时在媒体查询的样式里加上!important测试：
```
@media screen and (max-width:500px) {
  #education-table td {
    display: block !important;
    text-align: center !important;
  }
}
```
如果生效了，就说明是优先级问题，需要调整选择器的权重，或者移除冲突的!important。
清除浏览器缓存
移动设备的浏览器可能缓存了旧版的CSS文件，导致新的媒体查询代码没被加载。可以尝试在手机浏览器里长按刷新按钮，选择“强制刷新”，或者直接清除浏览器的缓存数据后再重新加载页面。
确认设备逻辑像素宽度
虽然你确认手机宽度低于500px，但要注意这里的max-width:500px对应的是逻辑像素，而非物理像素。部分高分辨率手机的物理像素很高，但逻辑像素可能接近或超过500px？不过你在开发者工具模拟Pixel5正常，真机Pixel7不行，这个可能性较低，但可以用JavaScript在真机上打印屏幕宽度验证：
```
console.log(window.innerWidth);
```
打开手机浏览器的开发者工具（可通过Chrome远程调试）查看输出，确认实际的逻辑像素是否真的小于500px。