移动端背景图未铺满的主因是html和body未设height: 100%、viewport标签缺失或Safari对100vh动态计算异常，需同步设置height: 100%、清除body默认margin、添加viewport meta标签，并优先使用min-height: 100dvh加fallback。
背景图在移动端没铺满，90%不是图或background-size: cover写错了，而是容器没高度、viewport标签缺失、或 Safari 对 100vh 的动态计算出问题。
html 和 body 高度没设齐，cover 就没地方盖
浏览器默认的 body 高度只包裹内容，可能只有几十像素；background-size: cover 再强，也只能缩放进这个“矮盒子”里。
-
html和body必须同时设height: 100%（不是100vh），否则body的 100% 没参照 - 必须显式清掉
body默认的margin: 8px，否则四周露白边 - 如果背景设在某个
div上，要确认它父容器没用flex或grid且未设align-items: stretch——否则子项高度由内容撑开，不是视口高
viewport 标签漏了，iOS Safari 直接按桌面宽度渲染
没写 <meta name="viewport" content="width=device-width, initial-scale=1">，Safari 会按 980px 宽度模拟桌面视口，cover 实际作用在伪宽屏上，裁剪逻辑全乱。
- 这句必须放在
<head>最前面，不能靠后或被 JS 动态插入 - 某些 CMS 或框架模板会默认删掉它，上线前务必检查源码
- 漏了它，
100dvh和100vh都会失效——因为根本没进入移动端渲染模式
iOS Safari 上 background-size: cover 显示一截，大概率是 100vh 抖动
地址栏收起/弹出时，100vh 值会突变，导致背景图瞬间缩放或错位；100dvh 更稳，但需 fallback。
立即学习“前端免费学习笔记（深入）”；
- 优先用
min-height: 100dvh，并加@supports not (height: 100dvh) { ... }降级到min-height: 100vh - 不要单独依赖
100vh，尤其在 iOS 15 及更早版本中，它在滚动初始帧常为错误值 - 若用
position: fixed模拟固定背景，height: 100vh同样不稳定，建议改用100dvh+ fallback
关键内容被裁掉，不是 cover 有问题，是图本身没预留安全区
cover 的行为是确定的：等比缩放 → 填满容器 → 居中裁剪。它不识别构图，只认宽高比差值。iPhone 竖屏（19.5:9）和常见 Banner 图（16:9）一叠加，顶部/底部必被切。
- 人脸、按钮、主文案必须落在图片中心 60% 区域内，这是跨设备最稳妥的“安全区”
- 显式写
background-position: center center，别只写center，部分安卓 WebView 对单值解析有偏差 - 避免用超宽图（如 3840×1080）做全屏背景——竖屏下裁得只剩中间一条
- 小屏可微调：
@media (max-width: 768px) { background-position: center 10%; }，把主体往下压一点
真正卡住人的从来不是选 cover 还是 contain，而是 html 和 body 的基础约束没写对、viewport 标签漏了、或者图的关键信息就压在边缘——这些点一旦忽略，调试半天也看不出 CSS 有错。
