background-size: cover在手机上总切掉人脸，因其只保证“填满”容器而不保证“内容可见”，等比缩放时短边撑满、长边溢出，而iphone 14 pro（19.5:9）与常见图片（16:9或4:3）宽高比差异大，竖屏必裁顶部/底部，横屏则可能左右被砍。
background-size: cover 为什么在手机上总切掉人脸
因为 cover 只保证“填满”，不保证“内容可见”。它等比缩放图片，让图片的短边刚好撑满容器，长边必然溢出——裁哪边，取决于屏幕和图片的宽高比差值。iPhone 14 Pro 是 19.5:9，多数背景图是 16:9 或 4:3，竖屏下必裁顶部/底部；横屏切换后又可能左右被砍。
常见错误现象：background-image 显示正常，但人物脸部、按钮或文字被截断；加了 background-position: center 还是不对——那是因为没写全，或没配合安全构图。
- 关键内容必须放在原图中心 60% 区域内（俗称“安全区”）
- 显式写
background-position: center center，别依赖默认值；旧版 iOS Safari 和部分安卓 WebView 对未声明的background-position解析不稳定 - 若主体偏右（如人像视线朝右），可用
background-position: right 20% center微调，避免脸被裁 - 禁用
50% 50%替代center center：少数安卓内核对百分比锚点计算有偏差
body 上设 background-size: cover 为啥不生效
因为 body 默认高度由内容决定，不是视口高度。哪怕写了 height: 100%，若父级 html 没设高，它照样塌陷——cover 就作用在一个高度为 0 的容器上，自然无效。
正确做法是同时初始化根层高度与边距：
html, body { height: 100%; margin: 0; padding: 0; }- 再给目标元素加
min-height: 100vh（推荐）或height: 100vh（仅当内容不超一屏时可用） - 避免直接在
body上用background-attachment: fixed：部分安卓 WebView 渲染异常，iOS Safari 滚动卡顿 - 更稳妥方案：用独立
div.full-bg容器包裹，不污染body样式链
cover / contain / 100% 100% 到底怎么选
三者行为完全不同，不能混用或凭感觉换：
-
cover：等比缩放，完全覆盖容器 → 适合 Banner、氛围图；接受裁剪，不保全图 -
contain：等比缩放，完整显示图片 → 适合 Logo、带文字的信息图；必留白，不填满 -
100% 100%：强制拉伸，无视比例 → 仅用于无关键结构的装饰图（如渐变纹理）；变形不可逆
真正平衡方案：用 aspect-ratio: 16 / 9 锁定容器比例，再配 background-size: cover，既控构图又防乱裁。
移动端必须加 viewport meta 吗
必须。没有 <meta name="viewport" content="width=device-width, initial-scale=1">，iOS Safari 和多数安卓浏览器会以桌面宽度（通常 980px）渲染页面，background-size: cover 实际作用在“伪宽屏”上，裁剪逻辑彻底错乱——你调半天 background-position 都是徒劳。
额外注意点：
-
background-attachment: fixed在 iOS Safari 上有明显性能问题，滑动卡顿；如需固定效果，建议用position: fixed+<img>替代 - 高清屏模糊？优先用
image-set()按 DPR 自动选图，比媒体查询更轻量、不发冗余请求 - 路径错误或图片分辨率低于 1920×1080，放大后必糊——再好的 CSS 也救不了源头
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
