aspect-ratio 在 safari ≤15.3 等老旧 ios 设备上被静默忽略，导致容器高度为 0、页面塌陷和严重 cls；需用 position: relative + padding-top 百分比 + absolute 内容层手动降级，且 @supports 不可靠、tailwind 不自动降级、flex/grid 中 aspect-ratio 本就不生效。
aspect-ratio 在老旧 iOS 设备上根本不会报错——它被静默丢弃，DevTools 里直接划掉或不显示，连 @supports 都可能失效。真正要处理的不是“报错”，而是“完全没效果 + 页面塌陷”。
为什么 Safari ≤15.3 不显示错误却让容器高度为 0
iOS Safari 15.3 及更早版本（覆盖大量 iPhone 6s–iPhone X 用户）根本不解析 aspect-ratio 声明。它不像语法错误那样抛异常，而是像忽略一个不存在的属性：样式表照常加载，但 computed height 为 auto 或 0px，导致图片/视频区域瞬间消失，后续加载完成才突然撑开（CLS 布局偏移严重）。
- Chrome ≤87、Edge ≤18、微信 X5 内核同理，均无 warning、no console log、no fallback hint
-
@supports (aspect-ratio: 1/1)在 Safari 15.3 中虽能解析该规则块，但内部aspect-ratio仍不渲染——降级逻辑必须写在@supports外部，否则旧设备连 fallback 都拿不到 - 别信 caniuse 上的“部分支持”描述：Safari 15.3–15.4 是“识别语法但不执行”的灰色地带，实测中
aspect-ratio: 9/16斜杠写法极易解析失败，小数写法aspect-ratio: 0.5625更稳
padding-top 百分比 fallback 必须满足的三个硬条件
仅写 padding-top: 56.25% 不够，旧内核下会因定位上下文缺失导致内容错位或不可见。
- 父容器必须设
position: relative，否则子元素position: absolute会相对于body定位，彻底脱离布局流 - 内容层（如
<img>或<video></video>）必须包裹并设position: absolute; inset: 0（或top: 0; left: 0; width: 100%; height: 100%），否则会被 padding 区域“吞掉”，只留空白 - 百分比值必须手算准确：
padding-top = (height ÷ width) × 100%，例如 4:3 →75%，1:1 →100%；用近似小数（如56.2%代替56.25%）会导致 1–2px 黑边或裁切
Tailwind 用户特别注意：aspect-[16/9] 不会自动降级
Tailwind 只编译你写的类，不做运行时检测。写 aspect-[16/9] 就是输出 aspect-ratio: 16 / 9，旧设备照样无视。
- 必须手动配对写：
relative pt-[56.25%] w-full（父容器） +absolute inset-0 w-full h-full object-cover（内容） - 避免混用
h-0和pt-[56.25%]：旧浏览器取h-0，结果高度为 0；新浏览器虽覆盖，但层叠冲突会让调试变混乱 - Safari 对斜杠语法解析不稳定，动态生成时务必先算好小数再拼类名，例如
aspect-[${h / w}]，而不是aspect-[${w}/${h}]
最易被忽略的一点：flex 或 grid 容器中，aspect-ratio 本身就不参与计算——不是兼容性问题，是布局模型限制。哪怕在 Safari 16+ 里，把 aspect-[1/1] 写在 display: flex 的子项上，也大概率失效。此时 fallback 不是“可选方案”，而是唯一可行路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
