background-size: cover 在移动端并非拉伸而是裁剪失控，主因是容器高度塌陷、vh 单位在 iOS 的 bug、高倍屏像素暴露及 background-position 默认居中导致关键内容被切；需用 aspect-ratio 或 padding-top 配合 min-height 和精确 position 控制裁剪区域。
background-size: cover 在移动端不是“开箱即用”的防拉伸方案，它本身不拉伸，但会因容器失控而裁错、糊掉或闪动——关键在容器约束和定位配合。
为什么 background-size: cover 在移动端看起来“拉伸”了
它根本没拉伸，只是你看到的那部分被裁得不对。常见现象包括：iPhone 竖屏下人物脸消失、安卓刘海屏 banner 文字被切半、滚动时背景图突然跳变模糊。
- 根本原因是容器高度塌陷：
height: auto或父级flex未设min-height，导致cover缩放基准丢失 - 视口单位（如
100vh）在 iOS Safari 中有 bug：地址栏收起/展开时vh值突变，容器重排 → 背景图重算缩放 → 视觉“拉伸感” - 图片分辨率不足 + 高倍屏（
dpr=2或3）放大后像素点暴露，被误认为“糊”
必须加的容器约束：不设宽高比就别用 cover
没有明确参照，cover 就是无头苍蝇。移动端尤其要防“宽度 100%、高度随内容塌陷”这种写法。
- 优先用
aspect-ratio: 16/9（现代浏览器全支持），搭配width: 100%和height: auto，让容器自己保持比例 - 兼容老设备时，改用
padding-top: 56.25%（16:9 的百分比 hack），再用position: absolute把背景图撑满 - 绝对不要只写
height: 100vh—— 改用min-height: 100vh，并加min-height: -webkit-fill-available兜底 iOS
background-position 不调等于默认砍一半
background-position: center center 是居中裁剪，但设计稿里的人脸、logo、标题往往不在正中心。移动端屏幕窄，偏移一点就切掉关键信息。
- 人物照/头像类背景：用
background-position: top center，确保头顶不被裁 - 带地面/底部元素的图：用
background-position: bottom center，留脚不切鞋 - 避免写死像素值（如
20px 40px），响应式下完全不可控；百分比（如30% 70%）更稳，但需真机反复调
cover 和 contain 混用时的坑：别在同一个区域来回切
有些项目为兼容不同设备，在媒体查询里切 cover ↔ contain，结果 iOS 上触发重绘卡顿，视觉上像“拉伸抖动”。
- 同一组件内保持
background-size值稳定，靠background-position和容器aspect-ratio微调适配 - 如果必须切换，加
will-change: background-size提前告知渲染引擎，但仅限必要场景 - 真正难搞的是第三方 SDK 插入的 banner 容器（比如广告位），它们常覆写
height或插入内联样式——这时只能用!important强锁aspect-ratio和background-position
cover 本身很可靠，问题永远出在它没被喂对尺寸、没被指对位置、没被放在一个不会突然收缩的盒子里。移动端最易忽略的是容器高度的“动态稳定性”，而不是 background-size 本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
