移动端全屏背景图必须用background-size: cover或contain配合height: 100%、viewport meta和background-position: center，禁用repeat；否则会出现马赛克、裁剪错位或仅显示局部。
移动端全屏背景图根本不能靠“平铺”来适配——background-repeat: repeat 是错误方向，它只会把一张小图复制满屏，和“全屏大图自适应”完全不是一回事。
为什么 background-repeat: repeat 在移动端会失效？
你写的 background-repeat: repeat 看似合理，但实际场景中几乎从不用于全屏背景：设计师给的是一张高清大图（比如 1920×1080 或更大），不是 20×20 的纹理贴图；repeat 会让这张大图被横向纵向无限复制，视觉上变成错乱马赛克，且无法控制关键内容位置。
常见错误现象包括：
- 真机上只看到左上角一小块图，其余全是重复副本
- 滚动时背景出现明显接缝或错位（尤其 Safari）
- 开发时用占位图（如 400×300）测试，误以为“生效了”，上线后大图一加载就崩
真正该用的 background-size 值只有 cover 和 contain
background-size: cover 和 background-size: contain 才是移动端全屏背景的核心控制项，它们决定图片如何缩放以匹配容器，而不是“平铺”。
二者关键差异：
-
cover：等比缩放，确保填满整个容器，可能裁剪边缘 —— 适合强调氛围、允许裁剪的首屏大图 -
contain：等比缩放，确保整张图完整可见，必然留白 —— 仅适用于图标、徽标等不可裁内容 - 绝对不要写
100% 100%或auto：100% 100%会强行拉伸变形；auto相当于不缩放，原图多大就显示多大，大概率只显示一截
必须同步满足的三个底层条件
哪怕 background-size: cover 写对了，只要漏掉以下任意一项，背景图在手机上就一定不全屏：
-
html和body都要设height: 100%+margin: 0+padding: 0—— 否则容器高度塌陷，背景无处可铺 - 页面
中必须有<meta name="viewport" content="width=device-width, initial-scale=1">—— 缺失会导致 iOS Safari 按 980px 宽度渲染，cover作用对象完全错位 - 容器需有明确高度基准，推荐用
min-height: 100dvh；若需兼容老设备，加@supports not (height: 100dvh) { ... min-height: 100vh ... }fallback
background-position: center 不是可选项，而是必选项
background-position: center 看似只是“居中”，但它在 cover 模式下决定了哪一部分图像保留在视口中央——这是防止关键内容（人脸、按钮、主文案）被裁掉的最后防线。
实操注意点：
- 必须搭配
background-repeat: no-repeat，否则center完全无效（repeat 会让所有副本都从同一位置开始） - 别依赖默认值，显式写
background-position: center center或50% 50%，避免不同浏览器解析差异 - 如果发现人物总被裁顶部，可微调为
background-position: center 30%（上移锚点），比像素值更稳定
最容易被忽略的不是语法，而是图本身——如果关键信息紧贴原图边缘，再怎么调 CSS 也救不回来。铺满的前提，是图的设计阶段就预留出中心 60% 的安全区。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
