Android WebView内核版本独立于Chrome版本，常滞后数个大版本，导致Grid、subgrid、gap等CSS特性解析异常或不生效，必须通过UA匹配与实际特性探测结合降级处理。
Android WebView内核版本 ≠ 手机Chrome版本
你手机装着 Chrome 128，不代表 WebView 也用 Chromium 128。Android 系统 WebView 是独立组件，由 OEM 厂商打包或系统更新提供，常滞后数个大版本。比如 Android 12 出厂 WebView 可能仍是 Chromium 95（2021 年底发布），而 grid-template-areas、subgrid、甚至 gap 在旧 Blink 中存在解析偏差或不触发重排。
常见错误现象：display: grid 生效了，但子元素错位、轨道宽度计算错误、auto-fit 完全不生效——这不是代码写错，是内核根本不按标准解析。
- 别在开发机上靠 Chrome 版本号判断兼容性，必须实测真机 WebView
- 用
navigator.userAgent提取Chrome/xx.x或WebView/xx.x段，忽略字符串里其他 “Chrome/128.0” 干扰 - Android 10 及以下默认按 Chromium ≤ 85 处理，禁用
subgrid、避免grid+flex混合嵌套
@supports (display: grid) 在旧 Android 上根本不可靠
@supports (display: grid) 在 Android 4.4（Chromium 30）及更早版本中被直接跳过——它不认识 @supports 这个规则，整段 CSS 都不会加载。你写的 Grid 样式压根没进浏览器，页面退化成无样式裸 HTML 或白屏。
典型现象：DevTools 的 Elements 面板里容器元素没有 computed display 值，或显示为 block；滚动卡顿、输入框聚焦延迟，不是性能问题，是渲染树缺失关键样式层。
立即学习“前端免费学习笔记（深入）”；
Android 开发调试技能，通过系统 ADB 工具操作 Android 设备。以下场景必须触发此技能：(1) 直接 ADB 操作——安装 APK、查看设备列表、抓取 logcat 日志、查看已安装应用、清除应用数据、截图、重启设备、拉取/推送文件、查看 CPU/内存/电池信息、adb shell 操作；(2)...
- 不要用
CSS.supports('display', 'grid')，Android 4.4 不支持window.CSS - 不要用
getComputedStyle(document.body).display === 'grid'，返回永远是block - 稳妥检测方式：
/(Android\s+4\.4|Chrome\/30)/.test(navigator.userAgent)+ 创建临时元素验证display: grid是否实际生效
gap 属性在 Android WebView ≤75 中静默失效
gap 是 Level 2 标准，Android WebView ≤75（对应 Chrome ≤75）、微信 X5 内核 v6.x 前都不识别。它不会报错，也不会留空值，而是直接丢弃整条声明——子元素贴死，毫无间距。
别靠“看起来像”判断，打开真机 DevTools → Computed 面板搜索 gap，值为空或标着 not supported 就是实锤。
- 改用
grid-row-gap和grid-column-gap替代，且必须同时写两个，只写一个列方向仍为 0 - autoprefixer 不会为
gap补前缀，除非你显式启用grid: true且源码里写了gap - 用
marginfallback 时，box-sizing: border-box和flex-shrink: 0缺一不可，否则子项宽度超限导致换行或滚动条意外出现
Grid 嵌套过深在 Android 5.1 WebView 中直接卡顿
3 层以上 Grid 嵌套，在 Android 5.1 WebView 中单次 getComputedStyle 耗时可超 8ms。滚动中频繁触发，帧率暴跌，用户感知就是“拖不动”。这不是 JS 慢，是布局计算爆炸。
常见错误结构：每个卡片单独设 grid-template-columns: 1fr max-content；.list-item 内部又套一层 display: grid 做图标对齐；用多层 grid-area 命名区域嵌套。
- 合并为单层 Grid，用
grid-template-areas描述整体布局，子元素只靠grid-area定位 - 中间层改用
display: contents（注意 iOS Safari 15.4+ 才支持） - 局部控制优先用
flex + gap，Flex 布局开销比 Grid 低约 40% - 删掉所有作用于
display: grid容器的will-change，它对 Grid layout 阶段无效
display: grid，但不认 grid-template-areas；可能解析 grid-column，却把 span 当作无效值丢弃。UA 匹配 + 特性探测 + 降级结构必须逐层对齐，漏掉任意一环，都可能在某款 vivo 或 OPPO 设备上突然崩掉。 
