Safari 15.3及更早版本静默丢弃aspect-ratio，不解析、不报错、DevTools不可见；必须手动用padding-top百分比降级，@supports不可靠，斜杠写法失效，应改用小数如aspect-[0.5625]。
Safari 15.3 及更早版本根本不解析 aspect-ratio 属性，不是“不支持”，而是静默丢弃整条声明——DevTools 里搜不到、Computed 面板不显示、也不报错。所谓“优雅降级”必须手动实现，@supports 在这些版本中不可靠，不能依赖。
为什么 Safari 15.3–15.4 的 aspect-ratio 看似支持却失效
它能识别 @supports (aspect-ratio: 1/1) 语法，但内部渲染逻辑断裂：斜杠写法（如 aspect-ratio: 16 / 9）在构建后、Vite HMR 或某些 Webpack 配置下会静默失败；小数写法（aspect-ratio: 0.5625）才稳定。更糟的是，Safari 15.3 会跳过整个 @supports 块，fallback 样式根本不会加载。
- 不要用
aspect-[16/9]—— Tailwind 中该写法在 Safari 15.4 前极易被忽略 - 改用
aspect-[0.5625]（16:9）或aspect-[0.75]（4:3），CSS 层面等价且 Safari 15.4+ 兼容性可靠 - 动态拼接类名时，先算好小数再注入：
className={`aspect-[${w / h}]`}，别拼字符串"aspect-[" + w + "/" + h + "]"
旧版 Safari 和微信 X5 必须用 padding-top 百分比 fallback
因为 @supports 不兜底，只能靠 CSS 层级顺序硬编码 fallback：先写兼容方案，再用 @supports 覆盖现代样式。注意 padding-top 的百分比是按父容器宽度计算的，必须配合定位才能让内容填满。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 父容器加
relative和pt-[56.25%]（16:9）或pt-[75%]（4:3） - 子元素（如
<img>或<video>）设absolute inset-0 w-full h-full - 不能同时写
h-0和pt-[56.25%]再加aspect-[16/9]，旧浏览器会取h-0导致高度为 0 - 别用伪元素模拟 padding，语义弱、调试难，直接用真实 DOM 结构更可控
Flex/Grid 容器里 aspect-ratio 失效不是兼容性问题，是布局优先级冲突
aspect-ratio 只对 display: block、inline-block、grid 或 flex 容器生效，但若其父级是 flex 或 grid，子项默认继承弹性行为，会先锁定尺寸，把比例约束挤掉。
立即学习“前端免费学习笔记（深入）”；
- 验证方法：给子项加
block类强制变为块级，看是否恢复高度 - 真正解法是调整结构：把
aspect-video放在非 flex/grid 的 wrapper 里，或改用padding-top方案 - 若必须嵌套在 flex 中，可加
flex-shrink: 0或min-h-0减少隐式拉伸干扰 -
<video>和<img>本身是替换元素，不能直接设aspect-ratio，必须包裹一层<div>
最容易被忽略的两个点
一是 Safari 15.0–15.3 的静默失效无法在本地最新 Safari 模拟器里复现，必须真机连 iOS 15.2 测；二是服务端传来的原始宽高（HTML width/height 属性）不是历史包袱，它是 SSR 首屏渲染和 JS fallback 的关键锚点——没它，CLS（累计布局偏移）风险极高。
