css变量在ios 12.0以下、android 4.4–6.0 webview中完全不支持，因内核缺失语法解析器，--x声明和var(--x)均被静默忽略；@supports(--x:red)在android 7.0前亦不可用，fallback必须无条件前置且单位一致。
CSS变量在Android旧版WebView中根本不会解析，不是“失效”，而是被浏览器直接跳过——连报错都不会有。
哪些安卓系统和内核不支持CSS变量
iOS 12.0 以下、Android 4.4（KitKat）的 WebView（即 UC、QQ、早期微信内置浏览器）完全不识别 -- 开头的自定义属性声明。WebKit 内核在这些版本中压根没有实现 CSS Custom Properties 语法解析器，var(--color) 整条声明会被当作无效值丢弃，样式回退到初始值或继承值，且 DevTools 里也看不到警告。
- Android 4.4–6.0：WebView 基于旧版 Chromium 30–44，
var()不可用 - Android 7.0–9.0：WebView 升级至 Chromium 51+，
var()基本可用，但部分嵌套用法（如rgba(var(--r), ...)）仍可能静默失败 - Android 10+：基本无兼容问题，但需注意某些定制 ROM（如华为 EMUI 10 早期版）可能降级 WebView 内核
@supports(--x:red) 在老安卓上根本不可靠
@supports (--primary: red) 这个检测本身从 iOS 12.0 / Android 7.0 才开始被识别；在 Android 4.4–6.0 的 WebView 中，整个 @supports 块会被浏览器忽略——连带里面定义的 var(--primary) 规则也一并跳过，导致你既没 fallback 也没新样式。
- 错误写法：
@supports (color: var(--x)) { ... }——var()不能出现在@supports右侧，语法非法 - 正确写法：fallback 必须无条件前置，
@supports块仅作升级层，例如：
button {
background-color: #007aff; /* 老系统生效 */
}
@supports (--primary: red) {
button {
background-color: var(--primary); /* 新系统才覆盖 */
}
}
uni-app 或 WebView 场景下特别容易踩的坑
UniApp 打包成 Android App 后，默认使用系统 WebView，而非 Chrome。很多低端安卓机出厂就带 Android 6.0 或 7.0，且厂商不更新 WebView，导致你本地调试正常（Chrome 120），真机上却全白。
- 检查方式：在目标设备打开页面，进 DevTools → Elements → 点
，看 Styles 面板里是否出现--primary-color声明；若没看到，说明变量文件根本没加载或被跳过 - 路径陷阱：
<link href="css/vars.css">在 uni-app 的 H5 模式下是相对路径，但在 App 端必须转为file:///android_asset/css/vars.css，否则 404，变量自然为空 - 构建干扰：Vite 或 Webpack 若把
:root声明抽到 JS 里动态注入（如通过document.documentElement.style.setProperty），老 WebView 会因 JS 执行时机晚于 CSS 解析而漏掉变量
真正关键的不是“怎么让变量生效”，而是“怎么让老系统至少有可用样式”。所有 var() 使用点都必须配无条件 fallback，且 fallback 值要和变量单位、类型严格一致——比如 --gap: 12px 对应 margin: 12px，写成 margin: 12 就是无效声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
