安卓4.x–5.x webview对viewport标签极其敏感，失效主因是标签位置错误、属性不全或重复；需置于head最顶部、含width=device-width和initial-scale=1.0、且仅一条。
viewport 标签没生效是头号原因
安卓 4.x–5.x 系统自带 WebView 对 <meta name="viewport"> 极其敏感：漏写、位置错、属性不全，媒体查询就直接“失重”。真机上 document.documentElement.clientWidth 返回 980 或远大于设备逻辑宽度（如 360），基本可断定 viewport 失效。
必须满足三点：
-
<meta>必须放在最顶部，且在任何<style></style>或 CSS 引入之前 - content 值必须同时含
width=device-width和initial-scale=1.0—— 写成width=320或只写一个会彻底废掉所有max-width断点 - 禁止重复：CMS、框架（如 UniApp）、插件可能悄悄注入第二条，最终 HTML 源码里只能有一条
<meta name="viewport">
@media 语法写错导致整条规则被忽略
老旧安卓 WebView 解析更严格，非法语法会直接跳过整条 @media 规则，控制台还不报错（只变灰禁用）。最常见错误是用数学符号：
- ❌
@media (max-width —— <code> 不是标准语法，浏览器直接丢弃 - ✅ 正确写法只有
max-width、min-height等固定关键字，例如：@media screen and (max-width: 600px) - ⚠️ 注意：
height本身不是标准媒体特性，必须用max-height或min-height；screen and是推荐前缀，增强兼容性
媒体查询被嵌套在选择器内部
这种写法在 Chrome DevTools 模拟时可能“看起来正常”，但在安卓 WebView（尤其 X5、UC 内核）中完全无效：
.header {
background: #333;
@media (max-width: 768px) { /* ❌ 错误：@media 不能嵌套在类里 */
display: none;
}
}
正确做法是让 @media 成为顶层独立规则：
.header {
background: #333;
}
<p>@media screen and (max-width: 768px) {
.header {
display: none;
}
}</p>
Flex 布局干扰媒体查询生效
在 Android 4.3 及更早机型上，display: flex 本身就不被识别，整个 Flex 容器会退化为 display: block。此时媒体查询虽能触发，但子元素因 Flex 上下文丢失而布局错乱，造成“样式写了却没效果”的假象。
- Autoprefixer 不会把
flex: 1转成老式-webkit-box-flex: 1，它只补前缀，不降级语义 - 若必须兼容 Android 4.0–4.3，关键区域得手动降级：用
width: 100%+float或重排 HTML 结构 - 验证是否 Flex 导致：临时删掉
display: flex相关声明，看媒体查询是否恢复作用
真实环境里，viewport 缺失和语法错误占失效案例的八成以上；但一旦涉及老安卓，就得立刻检查 Flex 是否成了“隐形破坏者”——它不报错，只默默让布局回归石器时代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
