移动端背景图显示异常90%源于容器高度未撑开、background-size未配对或viewport缺失；核心解法是用background-size: cover配合min-height: 100dvh及viewport标签，并确保关键内容位于图片中心60%安全区内。
移动端背景图“没铺满”“被裁掉”“留黑边”，90%不是图的问题，是容器高度没撑开、background-size没配对、或<meta name="viewport">缺失导致的。
为什么background-position: center在手机上还是切图？
background-position: center只管“图往哪摆”，不管“图怎么缩”。浏览器默认用background-size: auto，图片原尺寸硬塞进容器，超出部分直接裁——哪怕你写了center，边缘照样切掉。
-
background-size: cover才是控制缩放的核心：等比放大填满容器，可能裁边，但不留白 -
background-size: contain会完整显示整张图，但常留上下/左右黑边（适合小屏关键内容不可裁场景） - 必须配
background-repeat: no-repeat，否则开发时用占位图容易误以为“没生效”，其实是平铺了 - 别写
100% 100%或auto，前者拉伸变形，后者不缩放
iPhone Safari 上背景图“只显示一截”怎么办？
真机上没铺满，大概率不是 CSS 写错，而是容器本身没高度。Safari 对min-height: 100vh渲染不稳定（地址栏收放导致vh动态变化），背景图“没地方铺”。
- 优先用
min-height: 100dvh（dynamic viewport height），它能响应地址栏显隐，兼容 iOS 16+ - 降级方案：
min-height: 100vh+@supports not (height: 100dvh) { ... }fallback - 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在，缺了这句，iOS Safari 按桌面宽度（980px）渲染，cover作用对象完全错了
如何让background-size: cover不乱裁关键内容？
cover的逻辑是“等比缩放并填满容器”，不保证内容居中。移动端屏幕宽高比差异大（比如 iPhone 14 Pro 是 19.5:9），图片固定宽高比时，必然裁剪上下或左右。
- 确保关键内容（人脸、按钮、文字）落在图片中心 60% 区域内（这是最稳妥的“安全区”）
- 显式写
background-position: center center，避免依赖默认值 - 避免用超宽图（如 3840×1080）做全屏背景——它在竖屏手机上会疯狂裁剪顶部和底部
- 若需保留全部内容又不想留白，只能接受拉伸：
background-size: 100vw 100vh（注意单位是vw/vh，不是%）
真正卡住人的从来不是cover或contain选哪个，而是100dvh没 fallback、viewport标签漏写、或者图本身关键信息就压在边缘——这些点一旦忽略，调试半天也看不出 CSS 有错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
