解决移动端 Media Query 不生效的问题
引言
在响应式网页开发中，Media Query 是实现不同设备适配的重要工具。它可以根据屏幕宽度、分辨率等条件加载对应的样式。然而在实际移动端开发中，有时会出现 Media Query 不生效的情况，导致页面无法按预期呈现。本文将分析常见原因，并提供排查与解决方法，帮助开发者快速定位并修复问题。
常见原因分析
视口设置缺失或错误
CSS 引入顺序或优先级冲突
媒体查询条件书写错误
浏览器或设备兼容性问题
缩放或像素比导致检测偏差
1. 检查视口 meta 标签
移动端浏览器默认会以桌面视图渲染页面，并通过缩放来适应屏幕，这会导致 Media Query 基于较大的虚拟宽度进行判断，从而失效。必须在 HTML <head> 中加入正确的视口设置。
正确的视口 meta 标签写法如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
其中 width=device-width 表示页面宽度等于设备宽度，initial-scale=1.0 表示初始缩放比例为 1。如果缺少该标签或 content 值不正确，移动端可能以较大宽度解析 Media Query，导致条件不匹配。
2. CSS 引入顺序与优先级
CSS 的层叠特性决定了样式应用顺序会影响最终效果。若通用样式写在 Media Query 之后，可能会覆盖媒体查询内的规则。应确保针对移动端的 Media Query 样式在需要覆盖的规则之后加载，或使用更高优先级的选择器。
示例结构：
/* 通用样式 */
.container {
width: 960px;
}
/* 移动端样式应在后面或通过提高优先级覆盖 */
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
}如果出现引入顺序错乱，可将移动端样式单独放在文件末尾引入，或使用 !important（慎用）保证生效。
3. 媒体查询条件书写错误
书写 Media Query 时需严格遵循语法，包括逻辑关键字、单位以及括号配对。常见错误包括使用错误的比较符、遗漏 and 连接、单位不一致等。
正确示例：
@media screen and (max-width: 480px) {
body {
font-size: 14px;
}
}错误示例及说明：
遗漏 and：
@media screen (max-width:480px)会直接被忽略使用逗号代替 and 表示“或”关系，注意语义差异
单位缺失或混用，如
max-width:480无效
4. 设备像素比与缩放影响
高 DPI（Device Pixel Ratio）设备在 Media Query 判断宽度时，会使用物理像素与 CSS 像素的换算结果。部分浏览器在缩放页面时会改变 viewport 的计算宽度，从而使 max-width 条件不符。可在查询中加入 -webkit-min-device-pixel-ratio 等检测高分辨率屏幕的条件辅助判断。
示例：
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 480px),
only screen and (min-resolution: 192dpi) and (max-width: 480px) {
/* 高分辨率小屏设备的样式 */
.icon {
background-size: 50% 50%;
}
}5. 浏览器兼容性排查
虽然现代移动端浏览器普遍支持标准 Media Query，但一些老旧系统内置浏览器仍可能不完整支持。可使用 @supports 做特性检测，或为不支持的环境提供回退方案。
检测示例：
@supports (display: grid) {
.grid-container {
display: grid;
}
}若需兼容低版本 Android WebView 或 iOS Safari，应提前确认其 Media Query 支持范围，并在必要时使用 JavaScript 动态添加样式类。
6. 调试方法
定位 Media Query 不生效的有效方式包括：
使用浏览器开发者工具的 Device Mode 模拟不同屏幕尺寸
在控制台打印当前视口宽度：
console.log(window.innerWidth);给 Media Query 区块加上临时高亮背景色，观察是否加载
检查网络面板确认样式文件已完整加载
示例调试代码：
window.addEventListener('resize', function () {
console.log('当前视口宽度:', window.innerWidth);
});总结
移动端 Media Query 不生效往往源于基础配置或细节疏漏。首先应确认 <meta name="viewport"> 是否正确设置，其次检查 CSS 引入顺序与优先级，再核对媒体查询语法与设备特性匹配情况。结合调试工具逐条排查，可以快速找到症结所在并完成修复。良好的响应式设计不仅依赖准确的 Media Query，还需考虑不同设备的渲染差异与用户体验一致性。