env(safe-area-inset-*) 是 css 环境变量，ios 11+、ipados 和部分 android（如 samsung one ui 3.1+）支持，用于获取刘海/圆角/手势条等不可用区域尺寸；safari 和 ios chrome 支持完整，android chrome 多数不支持。
env(safe-area-inset-\*) 是什么，哪些设备支持
env(safe-area-inset-top)、env(safe-area-inset-right)、env(safe-area-inset-bottom)、env(safe-area-inset-left) 是 CSS 环境变量，由 iOS 11+、iPadOS 和部分 Android（如 Samsung One UI 3.1+）浏览器注入，用于获取刘海/圆角/手势条等造成的不可用区域尺寸。
Safari 是最早完整支持的，Chrome for iOS 借助 WebKit 渲染引擎也继承了该能力；但 Android Chrome（非 WebView）多数版本不识别这些变量——别指望它在 Pixel 或旧版三星上生效。
实际使用前务必检查：打开 Safari 开发者工具 → Elements → 计算样式，搜索 env(safe-area-inset-bottom) 是否有值（如 24px），没值就说明当前环境不提供。
怎么用 env() 给 body 或容器加安全边距
直接把 env() 当作长度值用在 padding 或 margin 上，但必须搭配 fallback（否则不支持时会失效）：
body {
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
env() 只接受单个 fallback 值，不能写成 env(safe-area-inset-top, 0)（漏单位会无效）
- 不要只加 padding-bottom 就以为搞定“底部手势条”——如果页面有 fixed 底部按钮，还得同步调整它的 bottom 值，比如：bottom: env(safe-area-inset-bottom, 0px)
- 避免在 height: 100vh 的容器上只靠 padding 适配：100vh 本身已包含刘海区域高度，padding 会把内容进一步下推，造成双倍留白
为什么用 padding 而不是 constant()？
constant(safe-area-inset-*) 是 iOS 11.0–11.1 的临时写法，iOS 11.2+ 已废弃，仅保留 env()。
现在写 constant() 属于历史包袱：
- Safari 15+ 完全不认
constant() - 即使加了
constant()fallback，也无法覆盖新系统行为 - 所有现代项目应只用
env()+ 合理 fallback，删掉constant()相关代码
fixed 元素被遮挡？检查 position 和 z-index 配合
刘海屏下，position: fixed; top: 0; 的导航栏可能被状态栏裁切，单纯加 padding-top 不解决这个问题。
正确做法是：
- 导航栏自身用
top: env(safe-area-inset-top, 0px)替代top: 0 - 如果导航栏内有 logo 或按钮需要“顶到真正顶部”，再用负 margin 拉回（慎用）
- 确保该元素
z-index足够高，避免被其他 fixed 层遮住（比如弹窗遮罩层） - 不要用
transform: translateY(-env(safe-area-inset-top))——env()不能在 transform 中计算，会直接失效
实际最易忽略的是：env() 值在横竖屏切换时动态变化，但某些 JS 动画或 height 计算没监听 resize，导致横屏后 bottom 区域计算错误。这类问题不会报错，只能靠真机反复旋转验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
