必须添加 viewport-fit=cover，否则 env(safe-area-inset-bottom) 返回 0；需同时设置 width=device-width、initial-scale=1 和 viewport-fit=cover 三者缺一不可；padding-bottom 应作用于 fixed/absolute 元素或其父容器，并按 constant() 在前、env() 在后的顺序降级，calc() 中禁用 env() 乘除运算。
viewport-fit=cover 必须加，否则 env() 全部返回 0
env(safe-area-inset-bottom) 不是“写了就生效”的 CSS 属性，它依赖浏览器是否激活了安全区域上下文。iOS Safari 只有在 <meta name="viewport" content="..."> 明确声明 viewport-fit=cover 时，才会注入 safe-area-inset-* 变量；缺了这句，env(safe-area-inset-bottom) 就是 0px，底部导航栏照样被小黑条盖住。
正确写法必须同时包含三个关键参数：
-
width=device-width—— 基础响应式前提 -
initial-scale=1—— 防止双击缩放干扰计算 -
viewport-fit=cover—— 激活安全区变量的开关（顺序无关，但三者缺一不可）
错误示例：<meta name="viewport" content="width=device-width, viewport-fit=cover"> —— 缺 initial-scale=1，部分 iOS 版本下仍可能失效。
padding-bottom: env(safe-area-inset-bottom) 是标准用法，但不能只靠它
直接给 fixed 底部栏加 padding-bottom: env(safe-area-inset-bottom) 是最常见且有效的做法，但它只对 position: fixed 或 position: absolute 的元素起作用——因为这类元素脱离文档流，padding 能“撑开”自身内容区，把按钮往上顶离小黑条。
容易踩的坑：
- 如果用
flex+margin-top: auto把导航栏推到底部，那得改在父容器上加padding-bottom: env(safe-area-inset-bottom)，而不是子元素 - 写成
bottom: env(safe-area-inset-bottom)是无效的：它只是把元素往下偏移，但容器高度没变，底部依然被截断 - 安卓、旧版 iOS 会忽略
env()，所以必须提供降级：padding-bottom: 0; padding-bottom: env(safe-area-inset-bottom);
兼容 iOS 11.2 之前要用 constant()，且声明顺序不能错
iOS 11.0–11.1 使用私有函数 constant(safe-area-inset-bottom)，11.2+ 才支持标准 env()。WebKit 会按 CSS 声明顺序取第一个有效值，所以 constant() 必须写在 env() 前面，否则老系统根本不会读它。
正确写法：
.bottom-nav {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
不要反过来，也不要只写一个。注意：constant() 在现代 Safari 中已废弃，但不写它，iPhone 8 Plus 升级到 iOS 11.1 的用户就会出问题。
calc() 里混用 env() 和像素值，版本兼容性极敏感
想让底部栏离小黑条留 8px 空隙？写 padding-bottom: calc(8px + env(safe-area-inset-bottom)) 看似合理，但在 Safari 15.4 之前完全不支持这种混合单位运算，整条声明会被浏览器静默丢弃。
安全写法只能靠层叠降级：
.bottom-bar {
padding-bottom: 8px;
padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
额外提醒：
-
calc(env(safe-area-inset-bottom) * 2)是非法的 ——env()不支持乘除，Safari 直接跳过该行 - PostCSS 插件如
postcss-env-function会把env()静态替换为固定值（比如34px），失去设备自适应能力，千万别用
真正难的不是写对那一行 CSS，而是确保 viewport 配置、声明顺序、降级策略、calc 兼容性四者全部到位——漏掉任意一环，真机上就只剩半截按钮。别信“加了 env 就完事”，iOS 安全区适配是个链式验证过程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
