必须添加 viewport-fit=cover，否则 env(safe-area-inset-*) 无效；因 iOS 默认限制在传统安全区，仅开启全屏模式才注入变量，正确写法为。
必须加 viewport-fit=cover，否则 env(safe-area-inset-*) 全部无效。
为什么 env(safe-area-inset-top) 不生效？
最常见原因是漏掉了关键的 viewport 配置。iOS 浏览器默认将页面限制在“传统安全区域”内，safe-area-inset-* 变量只有在全屏渲染模式下才被注入。不加 viewport-fit=cover，浏览器压根不计算这些值，返回 0px 或直接忽略。
正确写法（必须放在 中）：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
- 仅加
viewport-fit=cover就够了，不需要其他 hack - 如果用了
user-scalable=no，不影响 safe area 变量生效 - 部分旧版 iOS（11.0–11.1）需额外加
constant()降级，但变量本身仍依赖viewport-fit=cover
如何用 env() 给顶部导航加安全间距？
固定定位的顶部栏最容易被刘海遮挡，直接用 padding-top: env(safe-area-inset-top) 是最稳妥方式——它会动态适配不同机型（iPhone X 是 44px，iPhone 14 Pro 是 59px），且不破坏原有布局流。
立即学习“前端免费学习笔记（深入）”；
示例（含兼容）：
.header {<br> position: fixed;<br> top: 0;<br> left: 0;<br> right: 0;<br> height: 48px;<br> padding-top: env(safe-area-inset-top);<br> padding-top: constant(safe-area-inset-top); /* iOS 11.0–11.1 */<br>}- 不要用
top: env(safe-area-inset-top)替代padding-top，否则会导致定位基准偏移、内容错位 - 如果导航栏有背景色，
env()值会自动包含状态栏高度，无需额外加 20px - 若同时用了 CSS custom property（如
--safe-top: env(safe-area-inset-top)），注意 Safari 旧版本不支持在自定义属性中嵌套env()
底部按钮被手势条盖住怎么办？
底部操作区（如 TabBar、悬浮按钮）常被 iPhone 底部 34px 手势条遮挡，用户点不到。此时应优先用 padding-bottom: env(safe-area-inset-bottom)，而不是 margin-bottom —— 后者无法撑开容器高度，按钮仍可能被截断。
关键点：
- 对
position: fixed的底部元素，bottom: 0+padding-bottom无效，改用bottom: env(safe-area-inset-bottom) - 若底部是 flex 容器内的子项，给父容器加
padding-bottom: env(safe-area-inset-bottom)更可靠 -
env(safe-area-inset-bottom)在横屏时可能为 0（如 iPad），需配合媒体查询判断方向
容易被忽略的边界情况
env() 是 CSS 环境变量，不是 JS 可读值，也不能在 @media 中直接判断是否支持。真正容易出问题的是：
- WebView 场景（如 Cordova、微信内置浏览器）：部分 WebView 内核未透传 safe area 变量，需 fallback 到 UA 检测 + 机型硬编码
- iframe 嵌套页：父页面开了
viewport-fit=cover，子 iframe 默认不继承，需单独配置 - 滚动穿透：当页面
body被设为overflow: hidden时，env()值仍存在，但视觉上可能误判为“没起作用”
最稳妥的做法是：始终把 env() 当作“增量补偿”，而非唯一布局依据；关键交互控件留至少 8px 内边距冗余。
