background-size: cover 在手机上裁切人脸是因为其“等比缩放、短边填满”逻辑与竖屏宽高比不匹配，需配合 background-position: center center 和 min-height: 100dvh，并确保 viewport meta 标签正确，否则裁剪错乱或渲染异常。
background-size: cover 为什么在手机上总切掉人脸
因为 cover 的行为是“等比缩放，短边填满容器”，不是“智能保留主体”。竖屏手机宽高比（如 9:19.5）和常见背景图（16:9 或 4:3）严重不匹配，图片必然裁上下或左右——裁哪边，取决于谁更“窄”。这不是 bug，是设计逻辑。你看到人物被砍头、按钮消失，是因为关键内容没落在图像中心 60% 安全区内。
真正起作用的三行 CSS 组合
单写 background-size: cover 没用，必须配齐以下三行，缺一不可：
-
background-size: cover—— 确保填满无白边 -
background-position: center center—— 显式锚定中心，避免旧版 Safari 把未声明值当左上角 -
min-height: 100dvh—— 用dvh替代vh，避开 iOS 地址栏收放导致的高度抖动
别写 height: 100vh，真机上常因 Safari 渲染 bug 导致容器塌陷，背景图只显示半截。
移动端必须加 viewport meta 标签
没有 <meta name="viewport" content="width=device-width, initial-scale=1">，iOS Safari 和多数安卓浏览器会按桌面宽度（约 980px）渲染页面。cover 实际作用在“伪宽屏”上，裁剪逻辑完全错乱，调试时看到的效果和真机完全不同。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：background-image 路径没错、CSS 也写了，但手机上整张图偏右/偏下一大截，甚至只显示左上角一小块——八成是 viewport 缺失或写错。
关键内容还是被裁？优先换图或切策略
如果反复调 background-position（比如试过 center top、50% 30%）仍保不住人脸，说明构图本身不适合竖屏。这时硬调参数不如降级：
- 用媒体查询换图：
@media (max-width: 768px) { .hero { background-image: url('bg-mobile.jpg'); } } - 小屏改用
background-size: contain，接受上下留白，但确保 Logo/文字完整可见 - 避免在 Bootstrap 的
.container上直接设背景——它自带max-width和padding，背景只会盖住内容区，不是全屏
最易被忽略的其实是底子：图片 404 时浏览器静默降级为纯色背景，computed styles 里看着 CSS 都对，但 background-image 根本没加载成功。真机调试时先看 Network 面板确认图片状态，再调样式。
