必须添加 viewport-fit=cover 才能使 env() 生效；需在 meta 标签中声明，否则 safe-area-inset-top 等值为 undefined；同时应结合 dvh 单位、fallback 方案及拇指热区优化实际交互体验。
必须先加 viewport-fit=cover，否则 env() 无效
很多开发者在 CSS 里写了 padding-top: env(safe-area-inset-top) 却没效果，根本原因是没启用安全区支持。iOS 和较新 Android 浏览器只在 viewport-fit=cover 开启时才注入 env() 变量。
检查你的 是否有这行：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
漏掉 viewport-fit=cover，env(safe-area-inset-top) 就是 undefined，CSS 会退回到初始值（比如 0），顶部状态栏直接盖住内容。
注意：viewport-fit=cover 在旧版 Safari（iOS 11.0 之前）不支持，但这类设备占比已极低；如需兼容，可加 constant() fallback（仅 iOS 11.2 以下）：
padding-top: constant(safe-area-inset-top)padding-top: env(safe-area-inset-top)
Bootstrap 的 .modal-footer 和 .modal-body 要手动适配安全区
Bootstrap 4/5 默认不处理安全区，.modal-footer 会紧贴模态框底部，但在 iPhone 底部手势条区域可能被遮挡；.modal-body 若设了固定高度或全高，也可能被顶部状态栏裁切。
正确做法不是改 Bootstrap 源码，而是用 env() 修正关键容器的内边距或最大高度：
- 给
.modal-header加padding-top: env(safe-area-inset-top)（防状态栏压字） - 给
.modal-footer加padding-bottom: env(safe-area-inset-bottom)（防手势条盖按钮） - 若用了
modal-fullscreen，.modal-body的max-height要减去安全区：max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 120px)（120px 是 header + footer + padding 估算值）
别用 100vh——移动端 Safari 地址栏收放会导致 vh 值跳变；100dvh 是当前（2026）稳定方案，覆盖主流 iOS/Android。
全局 body 或 .container 加安全区 padding 是最简方案
如果你的页面结构简单（比如单页资讯流、表单页），不需要局部微调，直接在根级容器上加安全区适配最快：
body {<br> padding-top: env(safe-area-inset-top);<br> padding-bottom: env(safe-area-inset-bottom);<br>}
但要注意两点：
- 如果页面已有
fixed导航栏（如.navbar-fixed-top），padding-top会和导航重叠，应只加在.content区域而非body - Android 部分机型（尤其带虚拟导航键的老款）不支持
env(safe-area-inset-bottom)，此时 fallback 到固定值（如44px）更稳妥：padding-bottom: max(44px, env(safe-area-inset-bottom))
这种写法对 Bootstrap 的栅格系统（.row/.col）完全透明，无需调整列宽或断点。
安全区不是“加 padding 就完事”，要结合拇指热区判断是否真需要
安全区解决的是“不被遮挡”，但用户能不能方便操作，取决于是否落在拇指热区内。例如一个 .modal-footer 按钮，即使加了 padding-bottom: env(safe-area-inset-bottom) 避开了手势条，但如果它离屏幕底边只剩 10px，用户拇指仍极易误触返回或切应用。
真正可用的底部操作区，应满足两个条件：
- 视觉上避开手势条（靠
env(safe-area-inset-bottom)） - 物理上留出 ≥44pt（约 16px@2x，24px@3x）的可点击高度（靠
min-height或padding）
所以更合理的写法是：
.modal-footer {<br> padding-bottom: env(safe-area-inset-bottom);<br> min-height: calc(44px + env(safe-area-inset-bottom));<br>}
这个细节常被忽略：安全区适配做完后，务必在真机上用拇指点一点底部按钮，看是否“悬空”或“太贴边”。模拟器永远测不出真实误触率。
