env() 在 ios 安全区域中的实际取值为 safe-area-inset-top、safe-area-inset-right、safe-area-inset-bottom、safe-area-inset-left，值为动态 css 长度（如 44px），不支持设备上默认为 0px。
env() 函数在 iOS 安全区域中的实际取值有哪些
iOS 11+ 提供了四个 env() 环境变量来描述刘海屏（以及底部 Home Indicator）所占用的安全区域边界：safe-area-inset-top、safe-area-inset-right、safe-area-inset-bottom、safe-area-inset-left。它们的值是动态的 CSS 长度（如 44px），仅在支持安全区域的设备（如 iPhone X 及后续带刘海或圆角的机型）上生效；在其他设备上，这些变量默认为 0px，不会报错，但也不会产生额外偏移。
注意：env() 不是函数调用，写法是 env(safe-area-inset-top)，不能加引号，也不能传变量名字符串。
如何用 padding 或 margin 安全地避开顶部刘海和底部指示器
最常用且稳妥的方式是给根容器或关键内容区添加内边距，让内容“退让”出安全区域。直接使用 env() 值即可，CSS 会自动 fallback：
body {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
- 如果只关心顶部（比如固定 header），只需设
padding-top或margin-top，无需同时处理左右 - 避免对
html元素设置padding，它可能干扰全局滚动行为；优先作用于body或具体布局容器（如.app-container） - 不要用
env()做计算后赋值给非 padding/margin 属性（如top），除非配合calc()且明确知道父容器定位上下文
为什么用 calc() 包裹 env() 更可靠
单纯写 padding-top: env(safe-area-inset-top) 在某些旧版 Safari（如 iOS 11.2–11.3）中可能被忽略。加上 calc() 能强制解析，提高兼容性：
header {
padding-top: calc(env(safe-area-inset-top) + 8px); /* 顶部留白 + 安全区 */
}
-
calc()是必须的兜底手段，尤其当需要叠加额外像素（如设计要求 header 内容离刘海再远 8px） - 即使不叠加，也建议统一写成
calc(env(safe-area-inset-top))，Safari 解析更稳定 - 不能写成
calc(env(safe-area-inset-top) + 0px)这类无意义叠加——部分早期版本会因此失效
viewport meta 标签必须开启 viewport-fit=cover
env() 变量只有在页面以「覆盖模式」渲染时才有效。如果 <meta name="viewport"> 缺失或未启用 viewport-fit=cover，iOS 会强制将页面缩放到安全区域内，此时 env() 值恒为 0px，所有适配逻辑失效。
正确写法是：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-
viewport-fit=cover是开关，不是可选项；没有它，env()就是摆设 - 搭配
initial-scale=1.0使用，否则缩放行为不可控 - 不要写成
viewport-fit=contain，那会让页面退回到传统安全区包裹模式，env()不触发
真正容易被忽略的是：这个 meta 标签必须出现在 最早位置，且不能被 JS 动态插入——iOS 只在初始解析时读取它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
