iphone刘海屏下bootstrap页面需手动启用ios安全区域支持：添加viewport-fit=cover meta标签，用env(safe-area-inset-top/bottom)覆盖fixed元素top/bottom，并为.container-fluid等容器设置对应padding，配合@supports和constant()降级。
Bootstrap 页面在 iPhone 刘海屏上顶部导航被遮、底部 TabBar 被小黑条盖住，不是 Bootstrap 本身的问题，而是它默认没启用 iOS 安全区域支持——env(safe-area-inset-top) 和 env(safe-area-inset-bottom) 必须手动注入，且不能依赖 Bootstrap 的栅格类自动生效。
viewport-fit=cover 是前提，缺一个字都不行
Bootstrap 页面如果没加这个 meta，所有安全区适配都会失效（返回值全是 0px）：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
注意三点：
-
initial-scale=1.0不能省，iOS Safari 不认没有它的env() -
viewport-fit=cover必须和width=device-width同一行，分拆或覆盖会导致失效 - 如果你用的是 Bootstrap 5 的
data-bs-theme="dark"或自定义主题构建流程，检查构建后 HTML 是否保留了该 meta——某些 SSR 模板会抹掉它
Bootstrap 的 .navbar-fixed-top 需要重写 top 偏移
Bootstrap 4/5 的 .fixed-top 用的是 top: 0，但 padding-top 对 fixed 元素无效。直接加 padding-top 只会让内容下移，导航栏反而被刘海切掉。
正确做法是覆盖定位偏移：
@supports (padding-top: env(safe-area-inset-top)) {
.fixed-top {
top: constant(safe-area-inset-top);
top: env(safe-area-inset-top);
}
}
关键点：
-
constant()必须写在env()前面，否则 iOS 11.0–11.1 会 fallback 失败 - 别用
padding-top试图“撑开” fixed 导航栏——它不占文档流，撑也没用 - 如果用了
.navbar-expand-lg等响应式折叠类，确保@supports规则在媒体查询内部或之后加载，否则可能被覆盖
底部 .navbar-fixed-bottom 或 TabBar 要用 padding-bottom + bottom
Bootstrap 没提供原生的底部安全区适配，.fixed-bottom 同样会被小黑条遮挡。只加 padding-bottom 不起作用，因为 fixed 元素脱离文档流。
两种可靠方案：
- 对 fixed 底部元素：用
bottom: env(safe-area-inset-bottom)替代bottom: 0（同 top 一样需constant()降级） - 对非 fixed 的底部容器（如
.container-fluid内的页脚）：加padding-bottom: env(safe-area-inset-bottom)，并确保父容器有min-height: 100vh，否则留白不明显 - fallback 值建议设为
34px（iOS 小黑条典型高度），而非0或20px——太小仍会被遮，太大在直屏设备上显得突兀
别信 Bootstrap 的 .container 自动适配
Bootstrap 的 .container 和 .container-fluid 默认不处理安全区。即使你加了 padding-top 到 body，.container 也会把内容框死在旧视口内，导致顶部留白出现在容器外、内容区顶部却依然紧贴刘海。
实操建议：
- 给
.container-fluid直接加padding-top: env(safe-area-inset-top)，而不是只动 body - 如果用了
.container（固定宽度），需配合max-width动态调整：例如max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right))，避免横屏时左右被裁 - 在 SCSS 中用
@supports包裹这些规则，否则旧版 iOS 或微信 WebView 会把整条声明当无效丢弃
最易被忽略的点：真机调试时，别只看页面渲染效果——打开控制台运行 getComputedStyle(document.body).getPropertyValue('padding-top')，确认返回的是带 px 的数值，而不是空字符串或 0px。很多“看似生效”的情况，其实是 fallback 值在起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
