android 4.4–6.0 webview 完全不支持 css 自定义属性，--x 声明和 var(--x) 被静默丢弃，无警告；7.0–9.0 虽基本可用但嵌套、calc()、filter 混用等场景易失效，需运行时检测 + 构建时降级双管齐下。
因为老旧 Android 系统的 WebView 内核压根没实现 CSS Custom Properties 语法解析器，--x 声明和 var(--x) 都被静默跳过——不是“失效”，是根本没读。
Android 4.4–6.0 的 WebView 完全不支持 CSS 变量
这些版本基于 Chromium 30–44，内核里没有变量解析逻辑。遇到 --primary: #007bff 或 color: var(--primary)，整条声明直接丢弃，DevTools 里也看不到警告，样式回退到继承值或初始值（比如文字变黑、背景透明）。
- Android 4.4（KitKat）：首次引入 Chromium WebView，但
var()不可用 - Android 5.0–6.0：Chromium 39–44，
var()解析不稳定，嵌套或 calc() 中使用大概率静默失败 - @supports(--x: red) 在这些版本中同样被忽略，连带里面定义的变量规则一并跳过
Android 7.0–9.0 上 var() 基本可用但有隐藏陷阱
Chromium 51+ 开始支持，但部分组合仍不可靠：
-
rgba(var(--r), var(--g), var(--b))这类嵌套用法可能被当作无效值处理，最终取默认rgba(0,0,0,0) - 和
filter: drop-shadow()混用时，老 WebKit 渲染管线会出 bug：阴影偏移、截断，甚至消失 - 变量若定义在局部选择器里（如
.theme-dark { --bg: #111; }），而你在.btn里直接background: var(--bg)，运行时无法跨作用域查到
uni-app 或 WebView 打包后真机白屏的常见原因
本地 Chrome 调试正常，但低端安卓机上全白，大概率不是代码问题，而是加载链断裂：
- CSS 文件路径没转成
file:///android_asset/css/vars.css，导致 404，变量文件根本没加载 - 变量定义在 JS 动态注入（如
document.documentElement.style.setProperty('--c', 'red')），PostCSS 插件看不见，构建后仍是var(--c)，老 WebView 直接跳过 - 用了
@supports (color: var(--x))但没前置 fallback，IE11 或 Android 4.4 里第二行整个声明失效，第一行又没写，结果属性取unset - 后备值写成
color: var(--c, #333)—— 这在 IE 和 Android 4.4 里完全无效，必须写成两行：color: #333; color: var(--c, #333)
检测与降级必须运行时 + 构建时双管齐下
光靠 PostCSS 替换不够，尤其当变量来自 JS 或含 calc() 时；光靠 @supports 也不行，它在 Android 6.0 前根本不识别。真正能落地的方案是：
- 运行时检测：
document.documentElement.style.setProperty('--test', 'ok') !== undefined，返回false就立刻加no-cssvars类 - 构建时降级：用
postcss-custom-properties，但必须配preserve: true（否则新浏览器失去动态能力），且变量定义在:root、值为静态常量（不能是calc(1rem + var(--gap))） - 兜底 class 比
@supports更稳：给加class="dark no-cssvars"，所有深色规则写成.no-cssvars .btn { background: #333; }，避免依赖变量链
最易被忽略的一点：后备值单位必须一致，padding: 12px; padding: var(--pad, 12px) 可以，但 padding: 12; padding: var(--pad, 12px) 在旧浏览器里会因单位缺失直接失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
