移动端背景图问题根源在于background-size误用、容器无高度及viewport标签缺失；须用cover配合center center定位、100dvh高度、image-set适配DPR，并实机测试三类设备。
移动端背景图不显示、只铺半截、横屏留白、关键内容被裁——这些问题几乎都出在三个地方：background-size 用错、容器没高度、<meta name="viewport"> 缺失。纯 CSS 就能解决，不用 JS，但每一步都得对齐真实设备行为。
为什么 background-size: cover 在手机上总切掉人脸或按钮
cover 不识别构图，只做等比缩放 → 填满容器 → 居中裁剪。裁哪边，取决于图片宽高比和设备屏幕比的差值。iPhone 14 Pro 是 19.5:9，很多背景图是 16:9 或 4:3，竖屏下必然裁顶底。
- 把关键内容（人脸、logo、主标题）严格放在图片中心 60% 区域内，这是目前最通用的“安全区”
- 必须显式写
background-position: center center，别只写center—— 部分旧安卓 WebView 对单值解析不一致 - 避免用超宽图（如 3840×1080）做全屏背景：竖屏下会疯狂裁剪顶部和底部，且加载慢
- 小屏易裁顶部？可加微调规则：
@media (max-width: 480px) { background-position: center 10%; }
容器没高度导致背景图直接消失
背景图只渲染在元素盒模型的实际范围内。如果 <div class="hero"> 里没内容、又没设高，它高度就是 0，背景图自然不出现——这在 Flex/Grid 容器里尤其隐蔽。
-
min-height: 100dvh是当前最优解（2026 年所有主流浏览器已支持），比100vh更稳，不受 Safari 地址栏收放影响 - 如果需兼容 iOS 15 及更早版本，用
min-height: 100vh+height: auto组合，但要加overflow: hidden防意外撑高 - 绝对不要用
padding-top撑高容器：它不参与背景图渲染区域计算，背景仍会塌陷 - html 和 body 必须同时设
margin: 0; padding: 0; height: 100%;，否则子元素的100vh会失效
background-attachment: fixed 在手机上完全无效
iOS Safari 早已废弃该属性，Android Chrome 84+ 和微信/QQ WebView 也主动禁用，DevTools 显示“生效”，但滚动时背景照常移动——不是你代码错，是浏览器不认。
立即学习“前端免费学习笔记（深入）”；
- 想模拟固定效果，用伪元素：
.hero::before+position: absolute; z-index: -1;+background-size: cover - 若不能加额外 DOM，改用
position: sticky，但父容器必须有明确高度，且不能设overflow: hidden -
-webkit-background-attachment: fixed或transform: translateZ(0)基本无效，还可能引发新层叠上下文问题
如何让高清屏不模糊、不发多余请求
CSS 背景图不支持 srcset，但 image-set() 是标准方案，按 DPR 自动选图，不发冗余请求。
- 写法：
background-image: url(img-fallback.jpg), image-set(url(img@1x.jpg) 1x, url(img@2x.jpg) 2x, url(img@3x.jpg) 3x); - fallback 图（第一个
url()）必须保留，用于不支持image-set()的老浏览器 - 别用媒体查询配 DPR：写法冗长、维护难，且
image-set()已覆盖全部主流场景（iOS 16.4+/Chrome 89+/Edge 91+） - 测试时用 Safari 开发者工具切换 DPR，别只看分辨率数值——DPR 才决定实际渲染像素密度
真正难的不是写对这几行 CSS，而是每次换图都要实机测三台设备：iPhone SE（窄屏+低 DPR）、Pixel 6（高 DPR+细长屏）、iPad mini（横竖屏切换频繁）。没有银弹，只有真机验证。
