直接使用env(safe-area-inset-bottom)并配合viewport-fit=cover可解决iphone底部导航栏被遮挡问题，需作用于padding-bottom/margin-bottom，注意safari版本兼容性及真机测试。
底部导航栏被iPhone刘海/圆角遮挡怎么办
直接加 env(safe-area-inset-bottom) 就行，但得加对位置、加对时机。iOS 11+ 的 WebKit 支持这个 CSS 环境变量，它返回底部安全区高度（比如 iPhone X 是 34px），不加的话，position: fixed; bottom: 0 的导航栏会卡进 Home Indicator 里，用户点不到。
- 必须用在
padding-bottom或margin-bottom上，不能只靠bottom偏移——因为bottom: env(safe-area-inset-bottom)不会“撑开”布局，只是把元素往下推，但底部仍可能被截断 - 只对
fixed或absolute定位的底部栏有效；如果用flex+margin-top: auto布局，得改用padding-bottom: env(safe-area-inset-bottom)作用于父容器 - 安卓和旧版 iOS 会忽略
env()，所以必须提供降级：比如padding-bottom: 0; padding-bottom: env(safe-area-inset-bottom);
为什么写了env却没生效
常见不是语法错，而是容器没“透出”安全区。WebKit 只在视口（viewport）允许延伸到安全区时才注入 env(safe-area-inset-*) 变量，而默认的 <meta name="viewport"> 往往禁用了它。
- 检查
<meta name="viewport" content="...">是否含viewport-fit=cover—— 缺了这句，env()全部返回 0 -
viewport-fit=cover必须和width=device-width, initial-scale=1同时存在，单独写没用 - 某些 WebView（如微信内置浏览器早期版本）不支持
viewport-fit，此时env()无效，需靠 UA 判断 + JS 注入 class 降级
padding-bottom 和 calc() 搭配的坑
想让底部栏始终离安全区边界 8px，写 padding-bottom: calc(8px + env(safe-area-inset-bottom)); 看似合理，但 Safari 15.4 之前不支持 env() 在 calc() 里混合单位运算，会直接失效。
- Safari 15.4+ 才稳定支持
calc(10px + env(safe-area-inset-bottom))，低版本必须拆开写：padding-bottom: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); - 不要写
calc(env(safe-area-inset-bottom) * 2)——env()不支持乘除运算，Safari 直接丢弃整条声明 - 如果用 PostCSS，别用
postcss-env-function这类插件自动补全，它会把env()转成固定值，失去动态性
要不要用 constant() 替代 env()
不用。iOS 11.2 引入 constant()，但 iOS 11.3 就标记为废弃，12.0 开始仅保留兼容，现在所有主流 iOS 版本都只认 env()。继续用 constant() 属于历史包袱，还可能触发 Safari 的兼容模式 bug。
- 写法上
constant(safe-area-inset-bottom)和env(safe-area-inset-bottom)一样，但语义不同：前者是常量，后者是环境变量 - 实际测试中，混用两者（比如先写
constant再写env）可能导致 Safari 忽略后者的计算，尤其在页面重绘时 - 唯一需要
constant()的场景是极老的 iOS 11.2 用户，占比可忽略，没必要为它增加维护成本
真正麻烦的不是写法，而是测试——真机上切后台再切回来，有时 env() 值会延迟更新；还有部分 Android 厂商定制系统会伪造 viewport-fit 行为，导致误判。上线前务必用多台 iOS 真机跑通交互流程，别只信模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
