<p>Android 4.4 WebView（Chromium 30）中calc()仅支持最简形式，%与rem混用、无空格、嵌套括号、除法及含var()的表达式均被静默丢弃；唯一可靠fallback是手动层叠：固定值在前、calc()在后，如width: 288px; width: calc(100% - 2rem)。</p>
有，而且问题很具体：Android 4.4（WebView 基于 Chromium 30）及更早版本对 calc() 的支持极弱，不是“部分不支持”，而是表达式稍复杂就整条声明被静默丢弃——连错误提示都没有，样式直接回退到上层继承值或初始值。
Android 4.4 WebView 中 calc() 的典型失效场景
它只认最简形式，任何偏离都会触发整条 CSS 规则失效：
-
calc(100% - 2rem)→ 失效（% 和 rem 混用，Chromium 30 不解析） -
calc(100vw-20px)→ 失效（加减号两侧没空格，旧 WebKit 直接跳过） -
calc((100vh - 60px) / 2)→ 失效（括号嵌套 + 除法，完全不识别） -
calc(100vh - var(--header-height))→ 失效（CSS 变量在 Android 4.4 根本不解析）
fallback 必须按层叠顺序手动写，Sass/Less 无法自动解决
预处理器编译时不知道运行环境，@include calc-fallback() 这类 mixin 只是生成两行 CSS，但顺序错了就没用。真正有效的写法只有一种：
width: 320px; width: calc(100% - 48px);
关键点：
立即学习“前端免费学习笔记（深入）”；
- 固定值必须写在前，
calc()写在后——靠浏览器“跳过不认识的值”机制生效 - 如果用了
rem，fallback 也得是 px 值，比如设计稿基准是 1rem = 16px，则写width: 288px; width: calc(100% - 2rem); - 别试图用 Sass 计算等效 px：
calc(100% - #{$base-font-size * 2})→ 这只是硬编码，失去响应性，且未解决 rem 场景
比 fallback 更可靠的替代方案
当项目必须覆盖 Android 4.4 或微信 6.5.22 之前版本时，强撑 calc() 往往比换方案更费劲：
- 宽度减去固定边距？改用
display: -webkit-flex+padding，Android 4.4 支持（需加前缀） - 等比容器（如 16:9）？放弃
height: calc(100% * 0.5625)，改用padding-top: 56.25%占位 +position: absolute子元素 - 动态视口高度（如
calc(100vh - 60px)）？JS 注入--vh自定义属性：document.documentElement.style.setProperty('--vh', window.innerHeight * 0.01 + 'px');，再用height: calc(var(--vh, 100vh) - 60px)—— Android 4.4 支持var()（虽不支持自定义属性本身，但 JS 注入后可读）
真正容易被忽略的是：这些兼容问题从不报错，DevTools 里也看不到 warning，你看到的只是“样式没生效”。查起来像布局 bug，实际是浏览器压根没解析那行 CSS —— 所以真机测试不能省，尤其得跑一遍 Android 4.4 真机或模拟器。
