全屏背景图在刘海屏上“不全屏”是因vh单位在iOS和部分安卓设备中对状态栏、地址栏的计算错误，应改用100dvh并降级为100vh，配合safe-area-inset-top微调内容、background-position分屏适配及脱离Bootstrap栅格结构。
直接结论：全屏背景图在刘海屏上“不全屏”，根本不是图片或 Bootstrap 的问题，而是视口单位（vh）在 iOS 和部分安卓设备上对刘海/地址栏/状态栏的计算方式不同——你写的 min-height: 100vh 在 Safari 中可能多算或少算几十像素。
为什么刘海屏下背景图顶部被裁、底部留白？
这不是 CSS 写错了，是浏览器把“安全区域”和“视觉视口”混用了：
- iOS Safari 的
100vh默认包含状态栏（刘海）高度，但页面滚动后地址栏收起，vh不重算，导致容器高度比实际可视区高——背景图被顶出顶部 - 某些安卓 WebView 把导航栏高度也算进
vh，结果内容区被压缩，背景图底部露白 - Bootstrap 的
.vh-100类本质就是height: 100vh，它不感知安全区域，也不响应动态变化 - 用
background-position: center center+cover时，裁剪锚点仍在中心，但容器高度错位 → 关键内容（比如按钮、标题）直接被切掉
必须用 100dvh 替代 100vh，并加降级兜底
100dvh（dynamic viewport height）是现代浏览器为解决这个问题推出的单位，它会实时响应地址栏/刘海/折叠屏等变化。但兼容性需处理：
- 当前（2026年中）Chrome、Edge、Safari 16.4+、Firefox 103+ 支持
dvh；旧版 Safari 必须降级 - 写法必须带 fallback：
.hero-bg { min-height: 100vh; min-height: 100dvh; background-image: url("bg.webp"); background-size: cover; background-position: center center; background-repeat: no-repeat; } - 不要只写
height: 100dvh—— 容器内容超长时会被截断；min-height是底线保障 - 如果项目需支持 iOS 15.6 以下，加 JS 补丁（仅必要时）：
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)，然后用min-height: calc(var(--vh, 1vh) * 100)
绕过栅格干扰，避免 .container 或 .row 吃掉安全边距
刘海屏设备对“贴边”更敏感，而 Bootstrap 默认的 .container-fluid 有 padding-left: 0.75rem（v5），.row 有负 margin，叠加后左右各缩进约 16px —— 在窄屏上尤其明显：
- 全屏背景区域必须脱离栅格结构：
<div class="hero-bg"></div>，不要套.container或.row - 如果必须嵌套（如 CMS 模板限制），用
mx-n3 px-0抵消：<div class="container-fluid mx-n3 px-0"><div class="hero-bg"></div></div> - 检查祖先元素是否设了
overflow: hidden—— 它会把超出安全区域的部分直接裁掉，看起来像“刘海吃掉了图片顶部” - 用
env(safe-area-inset-top)微调关键内容位置（非背景图本身）：padding-top: env(safe-area-inset-top)只用于文字/按钮等浮层，别加给背景容器
移动端对齐要主动重置 background-position，不能只靠 center center
同一张图，在 iPhone 14 Pro（2556×1179，挖孔居中）和 Pixel 7（2400×1080，无挖孔）上，center center 的裁剪结果完全不同。重点区域（如人脸、CTA 按钮）很容易被切：
- 小屏优先用
background-position: top center，确保头部信息不被刘海遮挡 - 在媒体查询里分设备调整：
@media (max-width: 767.98px) and (orientation: portrait) { .hero-bg { background-position: top center; } } @media (min-width: 768px) { .hero-bg { background-position: center center; } } - 避免用百分比值（如
20% 30%）—— iOS Safari 对它的解析在刘海屏上有偏差，关键词（top left）或像素偏移（10px 20px）更稳 - 图片本身预留安全边距：设计稿顶部至少留 60px 空白，别把核心文案压在顶部 20px 区域内
真正难的不是写出能跑的代码，而是意识到「全屏」在不同设备上根本不是一个固定数值——它随系统 UI 动态变化，且无法用单一 CSS 属性穷举。每次上线前，必须真机连 Safari Web Inspector 看 computed height 和 background-position 实际生效值，而不是只信模拟器。
