必须通过navigator.userAgent精确提取Chrome/或WebView/后的主版本号来识别真实内核，Android WebView内核常滞后于设备Chrome版本，导致grid-template-areas、gap等CSS特性失效或解析异常。
Android WebView 和 Chrome 表现不一致，不是“加个前缀就能好”，而是内核版本、UA 伪造、功能支持粒度完全不同——必须按真实渲染引擎做分层兼容，不能靠设备上装的 Chrome 版本猜。
怎么准确识别 Android WebView 或旧 Chrome 内核
不能看 navigator.appVersion 或设备型号，得从 navigator.userAgent 里精确提取 Blink 主版本。关键匹配顺序：
-
Chrome/(\d+)\.→ 真 Chrome（非 WebView） -
WebView\/(\d+)\.→ 系统 WebView（最常见不一致源头） -
Version\/(\d+)\.+Mobile+WebKit→ iOS Safari，但部分国产安卓浏览器也会伪造，需二次排除（如含MQQBrowser就跳过）
示例代码可直接运行：
const ua = navigator.userAgent;
const kernelVersion = (ua.match(/Chrome\/(\d+)\./)?.[1] ||
ua.match(/WebView\/(\d+)\./)?.[1] ||
'unknown') * 1;
// Android 4.4–7.1 的 WebView 通常为 30–51，Chromium 85 以下基本不支持 subgrid/gap哪些 CSS 特性在 WebView 里大概率失效或错乱
不是所有“现代 CSS”都能降级，有些是解析器直接跳过整条规则：
立即学习“前端免费学习笔记（深入）”；
Android Remote Control
下载
远程控制 Android 设备，支持截图、自动化操作手机 App 等功能。本应用使用 uiautomator2 作为底层框架，通过 ADB 连接设备，用户无需 Root（1）查看手机屏幕；（2）自动化操作手机 App；（3）远程安装/卸载应用……
-
display: grid+grid-template-areas：Android WebView ≤ 85 会忽略命名区域，grid-area: header变成无效声明 -
gap属性：旧 Blink 不识别，也不 fallback 到margin，必须显式补grid-column-gap和grid-row-gap -
scroll-snap-type：Chrome 65–90 在 WebView 中捕捉延迟高，scroll-snap-align: center比end更容易跳变 -
@supports (display: grid)：在 WebView ≤ 75 中可能返回true，但实际布局仍错乱——因为支持的是“语法解析”，不是“行为正确”
路径、video、flex 这三类高频翻车点怎么写才稳
它们不是“样式问题”，而是 Android 浏览器对协议、媒体策略、布局模型的硬限制：
-
file://协议下所有资源必须用./前缀：<link rel="stylesheet" href="./main.css">，写/main.css会请求系统根目录 -
<video></video>在 Android 上不显示poster，封面必须用<div style="background: url(cover.jpg)"> 遮罩；播放必须由 <code>touchstart触发，DOMContentLoaded里调play()必失败 -
flex: 1在 Android 4.3 及更早 WebView 中完全被忽略，autoprefixer 不会把它转成-webkit-box-flex: 1，得手动改成width: 100%+float: left或 JS 动态计算高度 - 写
android >= 4.4→ autoprefixer 认为“4.4+ 都支持 flex”，但实际 Android 4.4 自带 WebView 是 Chromium 30，连display: -webkit-flex都不认 - 必须写死：
android 4.2, android 4.3, android 4.4，再配overrideBrowserslist: true强制生效 - 验证是否真生效：
npx autoprefixer --info | grep "android 4.2"，没输出就等于没进规则
为什么 autoprefixer 配了还不管用
autoprefixer 只解决“语法前缀”，不解决“语义缺失”。它能把 display: flex 补成 display: -webkit-flex，但不会把 flex-wrap: wrap 转成 flex-flow: row wrap（老内核不支持），更不会把 flex: 1 拆解为老式 box 模型。
真正要命的是 browserslist 配错了：
最后提醒一句：WebView 的内核更新不依赖用户装什么 Chrome，它绑在系统更新或 OEM 固件里。你测的那台手机跑着 Chrome 128，不代表它的 WebView 就是 128 —— 很可能还是 95。
