低版本移动浏览器静默丢弃 aspect-ratio，必须用 padding-top 百分比方案 fallback；该方案兼容 IE6 起所有平台，因 padding-top 百分比按父宽计算，是 CSS2.1 规范行为。
低版本移动浏览器（如 iOS Safari ≤15.3、微信 X5、UC、旧安卓 WebView）根本不会解析 aspect-ratio，不是“不生效”，而是静默丢弃——DevTools 里划掉、Computed 面板里不出现、Console 无任何提示。必须手动 fallback，不能靠构建工具或 @supports 自动兜底。
为什么只能用 padding-top 百分比方案
这是唯一从 IE6 起就全平台稳定的方案，因为 padding-top 的百分比值始终按父容器宽度计算，是 CSS2.1 规范定义的行为，不依赖任何新特性。而 aspect-ratio 没有前缀形式（如 -webkit-aspect-ratio），autoprefixer 默认不处理，非官方插件还可能误删整行。
-
padding-top: 56.25%对应 16:9（9 ÷ 16 = 0.5625），手算错一位小数（比如写成56.2%或56%）会导致比例明显失真 - 必须设父容器
position: relative，否则子元素position: absolute会相对于body定位，彻底脱离上下文 - 内容层必须用
position: absolute; inset: 0（或top: 0; left: 0; right: 0; bottom: 0），只写width: 100%; height: 100%会被 padding 区域“吞掉” - 避免混写
height: 0和padding-top后又加aspect-ratio——旧浏览器取height: 0，直接压扁内容
@supports 必须外置，且顺序不能反
@supports (aspect-ratio: 1/1) 在 Chrome ≤27、IE、微信 X5、UC 等环境里根本不支持，整块规则会被跳过。降级逻辑必须写在 @supports 外部，新浏览器再覆盖。
- 正确写法：
.ratio-box { position: relative; width: 100%; padding-top: 56.25%; }<br>@supports (aspect-ratio: 16/9) { .ratio-box { padding-top: 0; aspect-ratio: 16/9; } } - 错误写法：
@supports not (aspect-ratio: 1/1)——部分旧 WebView 解析失败会整段丢弃；@supports块写在 fallback 前面——旧浏览器跳过，无样式可执行 - Safari 15.3–15.4 存在“识别
@supports但不渲染aspect-ratio”的 bug，此时 fallback 样式根本不会触发
Flex/Grid 中 aspect-ratio 失效的真实原因
aspect-ratio 只在元素有明确可推导宽度时才生效。而 Flex/Grid 的收缩/拉伸逻辑会先锁定尺寸，把比例约束挤掉。
立即学习“前端免费学习笔记（深入）”；
- Flex 场景：子项若带
flex: 1或显式min-width: 0，会强制压缩；临时加flex-shrink: 0可验证是否为此问题 - Grid 场景：若列宽写死（如
grid-template-columns: 200px 200px），子项再设aspect-ratio也无效；改用1fr或minmax(0, 1fr)留弹性空间 - 即便用了 fallback，若父容器是
display: flex且子项设了height: 0，部分浏览器会把它压缩成 0 高度，导致padding-top失效
真正麻烦的不是 padding-top 本身，而是混合场景：比如一个用了 aspect-ratio 的卡片，又嵌在 flex 容器里，还要求响应式换行——这时必须逐层检查 display 类型、父容器约束、以及 Safari 特定版本的静默降级行为。别指望一套 CSS 通吃所有环境。
