移动端CSS变量在iOS 12以下/Android 4.4 WebView中完全不支持，需用无条件fallback+@supports(--x:red)增强，且fallback须前置、单位一致，真机调试不可依赖Chrome模拟。
移动端CSS变量在iOS 12以下/Android 4.4 WebView里直接失效
CSS自定义属性（--primary-color）在iOS 12.0之前、Android 4.4 WebView（即旧版UC/QQ浏览器内核）中完全不支持，连var(--x)解析都会被忽略，样式直接“消失”。这不是渲染错位，是压根没生效。
不能靠加前缀或polyfill修复——这是语法级缺失，浏览器解析器根本没见过--开头的声明。
@supports不能检测所有老系统，必须限定语法范围
@supports (--foo: red) 在 iOS 12.0+ 才返回 true；但在 iOS 11.4 或 Android 4.4 的 WebKit 内核里，整个@supports块会被跳过（当作无效CSS），导致 fallback 规则也一并失效。
所以不能只写一层@supports，得配合“无条件 fallback”作为保底：
立即学习“前端免费学习笔记（深入）”；
button {
background-color: #007aff; /* 无条件兜底 */
}
@supports (--primary: red) {
button {
background-color: var(--primary);
}
}这样即使@supports被忽略，第一行依然生效。
注意：@supports (color: var(--x)) 是无效写法——var()不是属性值类型，不能出现在@supports括号内右侧。
变量批量降级时，避免重复声明覆盖
如果用 PostCSS 或构建工具自动注入 fallback，要注意声明顺序和 specificity：
- fallback 必须写在
@supports块之前，否则老系统会读到空规则 - 不要用
!important强行覆盖，容易在新系统里破坏 CSS cascade - 变量名若含单位（如
--gap: 12px），fallback 值必须带相同单位，不能只写12
错误示例：
:root {
--gap: 12px;
}
.example {
margin: var(--gap); /* 新系统生效 */
margin: 12; /* 老系统 → margin: 12 (无效) */
}正确写法：
.example {
margin: 12px; /* 兜底 */
}
@supports (--a: 0) {
.example {
margin: var(--gap);
}
}真机调试时，别信Chrome DevTools的“emulated CSS Variables”
Chrome 模拟的 iOS 12.1 实际运行的是 Blink 引擎，它支持 CSS 变量——但真实 iOS 12.0 设备用的是旧版 WebKit，不支持。模拟器里看着正常，真机上白屏或错色很常见。
验证方式只有两个：
- 用 Safari 技术预览版（支持 WebKit 最新特性）对比 iOS 12 正式版表现
- 在 BrowserStack 或真机上跑
getComputedStyle(document.documentElement).getPropertyValue('--x')，返回空字符串就是不支持
最稳妥的兼容节奏是：把@supports当“增强开关”，而不是“兼容开关”——默认按无变量写，再用@supports叠加现代能力。变量本身不是必须的，可读性和维护性才是关键。
