background-size: cover 单独使用无效，需配合 html/body 高度设置或独立容器（如 min-height: 100vh），并显式声明 background-position: center center；移动端裁剪源于宽高比差异，应预留中心60%安全区、添加 viewport meta 标签，并依场景选用 cover/contain/100% 100%。
background-size: cover 能实现全屏自适应，但单独写它几乎必然失败——真正起作用的是整套容器高度控制 + 位置锚定 + 视口约束的组合。
为什么 background-size: cover 单独加在 body 上没反应
因为 body 默认高度由内容撑开，不是视口高度；哪怕写了 height: 100%，若父级 html 没设高，它照样塌陷。浏览器渲染时，cover 是按实际容器尺寸缩放的，而塌陷容器可能只有几像素高。
- 必须同步设置
html, body { height: 100%; margin: 0; padding: 0; } - 更稳妥的做法是用独立容器：比如
<div class="full-bg">，配min-height: 100vh，避免内容超长时背景被截断 - 不要依赖
body承载全屏背景——它还承担重置、字体继承等职责，容易被其他样式干扰
background-position 写 center center 而不是 center 或 50% 50%
虽然规范里 background-position 默认值是 0% 0%，但部分旧版 iOS Safari 和安卓 WebView 对未声明值解析不稳定，尤其在 background-attachment: fixed 场景下可能回退到左上角。
- 显式写
background-position: center center，两个center比单个更明确，语义清晰且兼容性好 - 避免用
50% 50%替代——少数内核对百分比计算有偏差，center是关键字，按容器中心锚定，不依赖数值解析 - 若关键内容偏上（如人脸），改用
center top或center 20%往上提，比默认居中更安全
移动端竖屏裁切人脸/按钮的根本原因和应对
不是 cover 有问题，而是它严格按“等比缩放 + 填满”执行：当手机竖屏（如 19.5:9）与背景图（常为 16:9 或 4:3）宽高比不一致时，必然裁剪——裁哪边，取决于谁更“窄”。横向构图图在竖屏下，顶部/底部被砍最常见。
立即学习“前端免费学习笔记（深入）”；
- 图片主体必须落在中心 60% 区域内，这是移动端最稳妥的“安全区”
- 加
<meta name="viewport" content="width=device-width, initial-scale=1">，否则 iOS Safari 会以 980px 宽度渲染，cover实际作用在伪宽屏上，裁剪逻辑彻底错乱 - 用媒体查询微调：
@media (max-width: 768px) { background-position: center 10%; }，把视觉重心往上移
cover vs contain vs 100% 100% 的真实取舍场景
这不是参数选错的问题，而是目标不匹配：每个值解决不同需求，混用反而坏事。
-
cover：适合氛围型全屏图（Banner、首屏大图），接受裁剪换沉浸感；必须配background-position控制裁剪焦点 -
contain：适合信息型图（Logo、带文字的示意图），要求完整可见；需配合background-repeat: no-repeat和background-position: center居中留白 -
100% 100%：强制拉伸，必变形；仅用于无比例敏感性的纯纹理、渐变或动态生成的占位图
真正难的不是写哪一行 CSS，而是图片构图是否预留了移动端安全区、meta 标签是否漏掉、容器高度是否被意外塌陷——这些点一错，cover 再标准也出不来效果。
