必须添加viewport-fit=cover，否则env(safe-area-inset-top/bottom)返回0px；需在meta中完整书写width=device-width, initial-scale=1.0, viewport-fit=cover，且不可被覆盖或动态修改。
viewport-fit=cover 必须加，少一个字都不行
Bootstrap 页面在 iPhone 刘海屏上顶部被切、底部小黑条盖住，根本原因不是 Bootstrap 没适配，而是 viewport-fit=cover 缺失——没有它，env(safe-area-inset-top) 和 env(safe-area-inset-bottom) 全部返回 0px，CSS 里写一百遍也白搭。
必须确保 HTML 中有且仅有一条完整、未被覆盖的 meta 标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-
initial-scale=1.0不能省，iOS Safari 依赖它才启用env()函数 - 必须和
width=device-width写在同一行，分拆、JS 动态重写、SSR 模板抹除都会导致失效 - 用 PWA 或 WebView 加载时，检查控制台 Elements 面板，确认该 meta 真实存在且未被第三方 SDK 覆盖
- 微信内置浏览器（X5 内核）不支持
viewport-fit=cover，真机调试别信模拟器，直接用 Safari 连真机看getComputedStyle(document.body).getPropertyValue('padding-top')
.fixed-top 被刘海盖住？别加 padding-top
Bootstrap 的 .fixed-top 是 position: fixed; top: 0，对它设 padding-top 完全无效——padding 是内容内部空间，动不了定位位置。你看到的“留白”其实是 body 下移，导航栏反而更靠近顶部，被刘海切得更狠。
正确做法是改 top 偏移量，并用 @supports 包裹防低版本崩溃：
立即学习“前端免费学习笔记（深入）”；
@supports (padding-top: env(safe-area-inset-top)) {
.fixed-top {
top: env(safe-area-inset-top);
}
}- 不要写
@supports (env(safe-area-inset-top))——语法非法，整块 CSS 被浏览器忽略 - 不要混用
constant()：Safari 15+ 已彻底移除，留着只会让维护变复杂 - 如果导航栏有背景色或阴影，注意
env(safe-area-inset-top)在 iPhone 8 等直屏设备上是0px，不会多出意外空白 - 别在 Vue/React 的
style={{ top: 'env(safe-area-inset-top)' }}里硬塞——JS 不解析 CSS 函数，只当字符串透传，浏览器收不到
.container-fluid 底部被小黑条盖住？用 inset 或 bottom 替代 padding-bottom
Bootstrap 的 .container-fluid 本身不处理安全区，但如果你在它里面放了 position: fixed; bottom: 0 的 tabbar，padding-bottom: env(safe-area-inset-bottom) 一样无效——fixed 元素脱离文档流，padding 对它没影响。
真正起作用的是控制其定位边界：
.tabbar {
position: fixed;
bottom: env(safe-area-inset-bottom);
/* 或更稳妥的 inset 写法 */
inset: auto 0 env(safe-area-inset-bottom) 0;
}-
bottom值必须带单位：env(safe-area-inset-bottom, 0px)，漏掉px会失效 - iPhone 竖屏时
env(safe-area-inset-bottom)通常是34px（Home Indicator 高度），横屏可能为0，值是动态的，别当死数记 - 如果用了
z-index，确保 tabbar 层级高于 Safari 地址栏，否则仍可能被系统 UI 盖住 - 避免在
height: 100vh容器里叠加padding-bottom——滚动时100vh会变化，导致底部错位
Android 设备别指望 env() 生效
env(safe-area-inset-*) 是 WebKit 专属特性，Android Chrome（非 WebView）基本不识别，Pixel、三星部分新版 WebView 可能有值，但不能当作兼容依据。写成跨平台方案只会埋坑。
如果你项目需兼顾安卓挖孔屏，得另走路线：
- 用
@media (display-cutout: top)检测挖孔（仅部分安卓浏览器支持） - 靠 UA 或屏幕高度做粗略 fallback（如
height > 800px且 iOS 以外，设padding-top: 24px） - 别把
env()和安卓逻辑混在一个@supports块里——它只对 iOS 有效，安卓下整块规则被跳过 - 真机测试永远比模拟器靠谱：iOS 11.2–12.x 仍在流通，务必拿旧款 iPhone 实测
最易被忽略的一点：env() 值是动态的，横竖屏切换、灵动岛展开、甚至某些系统动画都可能触发变化，别在 JS 里缓存它的初始值去计算布局高度。
