env() 必须直接写在 css 属性值中，不可赋值给 scss 变量或封装，否则编译为字符串导致失效；需用 @supports 正确检测并提供 fallback；fixed 元素应使用 calc() 组合 env()。
直接在 SCSS 中写 env() 就行，别封装、别转义、别用 $variable 代理 —— 否则编译后变成字符串字面量，浏览器根本不会执行函数调用。
为什么不能把 env() 赋值给 SCSS 变量
SCSS 是编译时预处理器，不认识 env()；它只会把 $safe-bottom: env(safe-area-inset-bottom) 当作普通字符串原样输出，最终 CSS 变成 padding-bottom: env(safe-area-inset-bottom)（带引号）或直接失效。浏览器看到的是无效语法，不是函数调用。
- ✅ 正确写法：
.footer { padding-bottom: env(safe-area-inset-bottom); } - ❌ 错误写法：
$safe-bottom: env(safe-area-inset-bottom); .footer { padding-bottom: $safe-bottom; } - 所有
env()必须出现在最终 CSS 的属性值位置，且不被 SCSS 插值或包裹
@supports 检测必须写对，且 fallback 要双重覆盖
@supports (padding-bottom: env(safe-area-inset-bottom)) 是唯一合法检测方式。iOS 11.2 之前连 @supports 都不支持，所以必须先写默认值，再用 @supports 覆盖。
- ✅ 正确结构：
body { padding-bottom: 16px; } @supports (padding-bottom: env(safe-area-inset-bottom)) { body { padding-bottom: env(safe-area-inset-bottom); } } - ❌ 错误检测：
@supports (env(safe-area-inset-bottom))（语法非法）、@supports (-webkit-safe-area-inset-bottom: 0)（已废弃） - fallback 值建议设为
16px或20px，别用0—— 否则旧设备上底部按钮直接被 Home Indicator 遮住
固定定位元素要用 calc() 组合，别用 margin
对 position: fixed 元素，margin-bottom: env(safe-area-inset-bottom) 看似简单，但会破坏滚动容器高度计算，导致按钮上滑时“掉出”视口。
- ✅ 推荐写法：
.tabbar { bottom: calc(env(safe-area-inset-bottom) + 8px); } - ✅ 更稳妥写法：
padding-bottom: max(16px, env(safe-area-inset-bottom)) - ❌ 避免写法：
margin-bottom: env(safe-area-inset-bottom)（尤其对fixed或 flex 子项） - 所有含
env()的计算，必须用calc()包裹，否则无法参与加减运算
真正关键的点是：env() 的值随设备状态动态变化，而 SCSS 编译只发生一次 —— 所以任何试图“提前算好”的做法都会失败。你写的不是逻辑，而是告诉浏览器“请在运行时去系统里查这个值”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
