SCSS 中 safe-area-inset-bottom 兼容需按 constant() → env() 顺序声明三行，fallback 值取 34px（iPhone X~14 Home Indicator 高度），推荐拆分为独立的 safe-area-top/safe-area-bottom mixin，且必须添加 viewport-fit=cover meta 才能使 env() 生效。
SCSS里怎么写safe-area-inset-bottom的兼容 fallback
必须按 constant() → env() 顺序声明，否则 iOS 11.2 以下直接失效。SCSS 不能靠变量自动插入多行，得手动展开或用 mixin 封装。最稳妥的是写成三行，让浏览器自然降级：
footer {
padding-bottom: 34px;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
注意：34px 是 fallback 基准值，不是 magic number——它对应 iPhone X~14 系列典型 Home Indicator 高度；若项目有深色主题或需更高容错，可设为 40px 或用 max(34px, env(safe-area-inset-bottom))。
封装 safe-area mixin 时为什么不能只传一个参数
因为 safe-area-inset-top 和 safe-area-inset-bottom 的使用场景、默认值、fallback 策略完全不同：顶部通常要预留状态栏（iOS 多为 44px），底部才是 Home Indicator（34px）；左右在绝大多数设备上是 0，但曲面屏可能非零。硬塞进一个 $side 参数反而容易误用。
推荐拆成两个独立 mixin：
立即学习“前端免费学习笔记（深入）”；
@mixin safe-area-bottom($fallback: 34px) {
padding-bottom: $fallback;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom, #{$fallback});
}
@mixin safe-area-top($fallback: 44px) {
padding-top: $fallback;
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top, #{$fallback});
}
-
$fallback必须带单位，且需用#{$fallback}插入到env()回退值中，否则 SCSS 编译报错 - 不要给
left/right单独封装——它们极少需要主动适配，真要用也建议单独判断设备类型再加 - 避免在
body或html上全局调用，容易引发滚动异常或高度塌陷
为什么 @supports 检测 env() 在 SCSS 里基本没用
@supports 是运行时 CSS 规则，而 SCSS 是编译时预处理器。你在 SCSS 里写 @supports (env(safe-area-inset-bottom)) { ... }，编译后就是原样输出，起不到“条件编译”作用，反而增加冗余代码和解析负担。
真正该做的，是在编译前就决定是否启用安全区域逻辑：
- 项目明确只支持 iOS 11.3+？直接删掉
constant()行，保留env()+ fallback - 需兼容微信小程序？注意小程序基础库 2.25.0+ 才开始支持
env()，旧版只能靠uni.getSystemInfoSync().safeArea动态注入 class - H5 端完全不支持
env()，别指望 CSS 自动 fallback，得靠 JS 注入data-safearea属性再写对应选择器
padding-bottom: env(...) 生效的前提你漏了哪一条
90% 的 “env(safe-area-inset-bottom) 不生效” 问题，根子不在 SCSS，而在 HTML 的 <meta name="viewport"> 缺了 viewport-fit=cover。没有它，iOS WebView 根本不会暴露这些环境变量，env() 返回空字符串，CSS 解析失败后直接跳过整条声明。
检查点清单：
- 确认
<meta>标签中包含viewport-fit=cover，且未被第三方 SDK（如某些统计脚本、UI 库）覆盖重写 - 避免在 iframe 内使用 —— 父页面没设
viewport-fit=cover，子页面的env()一定为 0 - 不要对
position: fixed元素自身设padding-bottom，而是对其父容器设；否则 fixed 元素会撑高父容器，破坏定位逻辑 - 安卓部分 WebView（如 UC 内核）虽支持
env()，但safe-area-inset-bottom值可能恒为 0，此时 fallback 值就决定了实际留白
复杂点在于：这个机制不是“写了就生效”，而是依赖原生容器层配合。比如 uni-app 里改完 manifest.json 的 app-plus.safearea 配置，必须重新运行，热更新不触发底层重载 —— 这类细节最容易被忽略。
