background-size: cover 在 iOS Safari 上看似拉伸，根本原因是容器高度链断裂导致计算依据错误；必须从 html/body 起逐层设 height: 100% 或 min-height: 100vh，并配 background-position: center、no-repeat 才能可靠全屏覆盖。
直接说结论：background-size: cover 在 iOS Safari 上拉伸，**不是 cover 本身失效，而是它作用的容器高度没被正确计算出来**。改用固定高度容器（比如 height: 100vh）是治标也治本的解法，但必须配对使用，否则照样拉伸。
为什么 iOS 上 background-size: cover 看似失效
iOS Safari 对百分比高度（height: 100%）的继承逻辑更严格：如果父元素没有明确的高度（比如是 height: auto 或未设高度），子元素的 100% 就会“掉链子”，算出一个意外值（常为 0 或极小值）。此时 cover 只能基于这个错误高度缩放图片——结果就是纵向严重拉伸或横向压缩。
开发工具模拟器不触发该问题，是因为它不模拟地址栏收起/弹出导致的视口高度动态变化，而真机上 100vh 会随 UI 元素进出实时重算，进一步放大高度链断裂的影响。
height: 100vh 必须和 height: 100% 配套使用
只给背景容器设 100vh 不够，常见错误是只改了最外层，忘了中间层：
-
.hero-section { height: 100vh; }✅ 确保根容器占满视口 -
.hero-content { height: 100%; }✅ 子容器必须继承，不能靠内容撑开 -
.hero-bg { background-size: cover; }✅ 此时 cover 才有可靠依据
漏掉中间一层（比如 .hero-content 没设 height: 100%），.hero-bg 的父级高度仍是 auto，拉伸照旧。
遇到软键盘弹出、地址栏隐藏时 100vh 失效怎么办
iOS Safari 在软键盘弹出或地址栏隐藏时会临时改变视口高度，导致 100vh 突然变小或变大，背景图“跳动”或裁剪异常：
- 避免在输入框聚焦时依赖
100vh—— 改用min-height: 100vh+height: auto组合 - 对 Hero 区域加
position: fixed;和top: 0; bottom: 0;，绕过视口重算逻辑（注意 z-index 和滚动兼容性） - 极端场景可监听
resize事件，用 JS 动态写入style.height，但仅限必要
真正容易被忽略的点是：iOS 上的“高度链”必须从 html 或 body 开始就打断默认的 height: auto 行为。哪怕只漏了一层 display: flex 容器没设高度，cover 就会回到“猜高”模式——这不是 bug，是规范里写死的继承规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
