用 min-height: 100vh 替代 height: 100vh 解决移动端地址栏变化导致的裁切或留白问题，优先使用 100dvh 实现精确定位，全屏区域绕过 Bootstrap .container/.row 结构或用 mx-n3/px-0 修正，并设置 background-color fallback、background-size: cover 和断点下重置 background-position。
用 vh 单位撑满视口，但别信 height: 100vh 能直接搞定
移动端 Safari 和部分安卓浏览器里，height: 100vh 会按初始视口高度计算，地址栏收起/弹出时页面不重绘，导致背景被裁切或留白。这不是 Bug，是规范行为。
- 用
min-height: 100vh替代height: 100vh，让容器至少占满一屏，内容超长时也能自然延展 - 配合
background-attachment: fixed时要小心：iOS 上可能触发渲染异常，优先用scroll - 如果依赖
vh做精确定位（比如居中按钮），改用height: 100dvh（现代浏览器支持），它响应地址栏变化
Bootstrap 的 .container 和 .row 会破坏全屏效果
默认的 .container 有左右 padding，.row 有负 margin，叠加后实际内容区域缩进，背景图边缘被“挡住”。
- 全屏区域直接用
<div class="bg-image">，绕过.container结构 - 必须嵌套 Bootstrap 栅格时，在父容器加
mx-n3（抵消 row 的 -1rem margin）和px-0（清空 container 的 padding） - 背景图建议用
background-size: cover+background-position: center center，避免拉伸变形
图片加载慢导致背景闪白，background-image 没 fallback
网络差时，background-image 加载前元素是透明的，底色暴露，尤其在深色主题下明显。
- 给容器设一个稳妥的
background-color，比如#f8f9fa（Bootstrap 的$gray-100） - 用
background-image: url(...) no-repeat center/cover合并写法，减少 CSS 解析歧义 - 大图务必压缩，WebP 格式比 JPEG 小 25%~30%，
<picture>降级只对<img>有效，CSS 背景图不支持
响应式断点下背景图错位，@media 里没重置 background-position
同一张图在小屏上居中，大屏可能只显示左上角——因为 background-position: center 是相对当前容器算的，而容器宽高比变了。
- 在
@media (min-width: 768px)等断点里，单独调整background-position，比如改成center 30%让重点区域始终可见 - 避免用
background-size: 100% 100%，它强制拉伸，失真严重；cover或contain更可控 - 如果用
object-fit配合<img>实现全屏，记得加position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
最麻烦的不是怎么写，而是不同设备上“全屏”的定义根本不一致：Safari 的 dvh、Android 的滚动条侵占、折叠屏的动态宽高比……测的时候别只盯着 Chrome 开发者工具模拟器，真机连着 USB 调一次，比写十行 CSS 都管用。
