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: cover。iOS Safari 13.3 及更早版本会静默退化为 background-size: auto，再叠加容器无明确高度，结果就是图片缩在左上角、或被强行拉伸——看起来像“变形”，实则是属性未执行。
加 -webkit-background-size: cover 也无效，该前缀在这些旧版本中同样不被支持。Can I Use 上标“支持”≠实际可用，真机测试时必须验证计算样式里 background-size 是否显示为 cover（而非被划掉或 fallback 成 auto）。
- 检查 DevTools 的 Computed 面板，搜索
background-size，确认值是否有效 - 避免把
background-size: cover写在内联样式或被 Bootstrap 等 reset 覆盖的规则里 - 横竖屏切换时，
vh单位在 Safari 中会突变，导致容器高度重算 → 背景图闪动 → 误判为“加载后变形”
容器没有显式宽高比或最小高度
当父容器 height: auto 或未设 min-height，cover 就失去参照系。Safari 旧版尤其敏感：它不会等图片加载完再计算尺寸，而是按初始空容器渲染，结果图片按原始尺寸硬塞进去，视觉上就是“拉伸”或“压扁”。
必须同时满足三个条件才能保底：
- 容器设
aspect-ratio: 16 / 9（Safari 15.4+），或降级用padding-bottom: 56.25%+position: relative -
background-repeat: no-repeat（否则重复图覆盖裁剪效果） -
background-position: center center（单写center在部分安卓 WebView 有偏差）
用了 .ico 格式当 background-image
Safari 对 .ico 作为 CSS 背景图的支持极差：它可能降级渲染为橙色方块，而 Chrome/Firefox 直接忽略或报 404。这不是路径问题，是格式本身不被当作标准图像处理。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
正确做法是立刻替换：
- 图标优先用
.svg（矢量、透明、无损缩放） - 兼容性要求高时用
.png（支持 alpha 通道） - 绝对不要用
.ico做background-image: url(...)
例如，把 heartgoldicon.ico 改成 heartgoldicon.svg，并更新 CSS 中的 URL。
广告 SDK 或第三方脚本覆写样式
很多广告 SDK 注入的容器会强制设置 height: 100% !important 或插入自己的 reset 规则，直接干掉你的 background-size。这种问题在真机调试时最难发现，因为 DevTools 里看到的样式可能已被运行时覆盖。
排查方式：
- 选中元素 → Computed 面板 → 点开
background-size右侧的箭头，看哪条声明被划掉、来自哪个文件 - 临时禁用广告脚本，确认是否恢复正常
- 用
!important强制覆盖（仅作临时验证，非长期方案）
最隐蔽的坑往往不在你写的 CSS 里，而在运行时注入的样式层。真机测试前，务必关闭所有第三方脚本做基线验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
