旧版android（4.4–6.0）webview不支持css变量、overscroll-behavior、@keyframes等特性，根本原因是其基于chromium 30–44内核，缺失相应语法解析器，所有相关声明被静默跳过，无警告或报错；fallback必须无条件前置，@supports检测不可靠，路径错误或js注入失败也会导致样式失效。
旧版 Android 浏览器（尤其是 4.4–6.0 系统自带 WebView）不支持部分 CSS3 属性，根本原因不是“写法不对”，而是内核压根没实现对应语法解析器——--x、overscroll-behavior、@keyframes 这些声明在 Chromium 30–44 中直接被跳过，连报错或警告都不会有。
Android 4.4–6.0 的 WebView 根本不解析 CSS 变量
这些版本基于 Chromium 30–44，WebKit 内核里没有 CSS Custom Properties 的词法分析逻辑。遇到 --primary: #007bff 或 color: var(--primary)，整条规则被静默丢弃。DevTools 的 Styles 面板里看不到该声明，Computed 值也不会出现 fallback。
-
@supports (--x: red)在 Android 6.0 前同样被忽略，连带里面定义的变量规则一并跳过 - fallback 必须无条件前置：
color: #333; color: var(--c, #333);，不能只写后半句 - uni-app 打包后路径未转为
file:///android_asset/css/vars.css，会导致 404，变量文件根本没加载
overscroll-behavior 在 Android 7–9 中纯属“不存在”
该属性直到 Chrome 63+ 才被实现，而大量 Android App 使用的系统 WebView 卡在 Chrome 50–59 区间。它不是“不生效”，是浏览器根本不认识这个字符串——overscroll-behavior: contain 写上去，Computed 样式里查不到，Elements 面板中显示为灰色且无高亮。
-
touch-action: none不能替代：它会禁用点击、长按，且在 Android 6–8 中常被降级为auto - JS 补位必须传
{ passive: false }，否则preventDefault()在 Android Chrome 56+ 中静默失效 - 触顶/触底判断要精确：
el.scrollTop === 0且e.touches[0].clientY > el.getBoundingClientRect().top
@keyframes 和 animation 在 Android 5–7 中需要双写+强制触发
Android 6.0 的 WebView 对动画引擎支持极弱，不加 @-webkit-keyframes 就等于没写。即使写了，若没显式设置 animation-fill-mode: forwards，动画结束后样式可能回退到初始值。
- 必须双写：
@-webkit-keyframes slide { ... }+@keyframes slide { ... }，名称大小写必须一致 -
animation属性也得双写：-webkit-animation: slide 0.3s;+animation: slide 0.3s; - 避免用
display: none → block触发 transition；改用visibility: hidden → visible+opacity - JS 触发动画前强制重排：
el.offsetHeight;（仅一次），让浏览器“意识到”样式将变
真正难的不是写 CSS，而是确认运行时环境是否真把它当回事
同一个 transform: translateZ(0)，在华为 EMUI 10 早期版可能因 WebView 内核降级而无效；同一个 overflow: auto，在 Android 2.3 中根本无法滚动，必须靠 iScroll 模拟。兼容性问题从来不是“有没有”，而是“在哪一层被截断”——是构建时 PostCSS 没替换？是运行时 JS 注入变量失败？还是路径 404 导致 CSS 文件压根没加载？查问题得从 DevTools 的 Network 和 Elements 面板开始，而不是先改代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
