background-size: cover 在 ios safari 13.3 及更早版本中完全不支持，会静默退化为 auto，导致图片缩在左上角或拉伸变形；根本原因是浏览器引擎级不识别该属性，加 -webkit 前缀也无效，必须用 padding-bottom + aspect-ratio 降级方案并搭配 background-position: center center 和 background-repeat: no-repeat 才能可靠渲染。
background-size: cover 在 iOS Safari 13.3 及更早版本里根本不会生效，它会静默退化成 background-size: auto，再叠加 background-position: center 和无高度容器，结果就是图片缩成左上角一小块、或者被强行拉伸——这不是你代码写错了，是浏览器根本不认这个属性。
为什么老 Safari 里 background-size: cover 看起来像拉伸
它压根没执行 cover 逻辑，而是按原始尺寸渲染，又没设容器高，视觉上就变成“压扁”或“撑开”。常见触发场景：
-
background-size: cover写在内联样式或被更高优先级 CSS 覆盖（比如 Bootstrap 的 reset） - 父容器
height: auto或未设min-height，cover 失去参照系 - 用了
background-attachment: fixed却没配background-position，滚动时重绘异常，出现局部“抖动拉伸”假象
兼容老 Safari 的三行保底写法
必须同时满足三个条件，缺一不可：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 容器显式设宽高比：
aspect-ratio: 16 / 9（iOS 15.4+）或降级用padding-bottom: 56.25%+position: relative - 背景图禁平铺：
background-repeat: no-repeat（否则重复图会覆盖裁剪效果） - 锚点强制居中：
background-position: center center（单写center在部分安卓 WebView 会解析偏差）
示例（含降级）：
.hero {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
}
.hero::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-image: url("bg.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
真机测试时最容易忽略的坑
Can I Use 标记“支持” ≠ 实际可用：
- iOS Safari ≤13.3：不支持
background-size: cover在任何上下文，加-webkit-background-size: cover也无效 - 横竖屏切换时，
vh单位在 Safari 里会突变，导致容器高度重算 → 背景图闪动 → 误判为“拉伸” - 广告 SDK 注入的容器常覆写
height或插入!important规则，直接干掉你的background-size
别只靠模拟器，得拿 iPhone 7（iOS 12）、iPhone 8（iOS 13.2）真机测；如果项目必须支持这些设备，background-image 就不是备选方案，而是主路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
