aspect-ratio 在移动端需按浏览器版本分层兼容：iOS Safari 15.4+、Android Chrome 88+ 原生支持；旧版 Safari 及微信 X5 内核会忽略导致塌陷；推荐双写 padding-top hack（如 16:9 用 56.25%）并叠加 aspect-ratio 覆盖现代浏览器，搭配 position: relative/absolute 和 object-fit 控制视频渲染。
aspect-ratio 在移动端是否能直接用
能，但得看浏览器版本。iOS Safari 15.4+、Android Chrome 88+ 才原生支持 aspect-ratio，旧版 Safari（比如 iOS 15.0–15.3）会直接忽略该声明，容器塌陷或拉伸变形。
常见错误现象：video 容器高度为 0，或者宽高比完全失控，尤其在微信内置浏览器（基于旧版 X5 内核）里几乎必然失效。
- 使用场景：需要响应式嵌入横屏视频（如 16:9）、竖屏短视频（如 9:16），且不希望 JS 计算高度或依赖 padding-top hack
- 推荐搭配
width: 100%和height: auto，避免与其他尺寸声明冲突 - 不要和
min-height或max-height混用——某些安卓 WebView 下会覆盖aspect-ratio的计算逻辑
不支持 aspect-ratio 时的降级方案
不能靠 JS 动态设 height，因为视频加载前尺寸不可知，且 resize 事件在移动端触发不可靠；padding-top hack 是目前最稳的 CSS 替代方案。
原理是利用子元素 position: absolute 撑开父容器高度，靠 padding-top 百分比值模拟比例（百分比基于宽度计算）。
- 16:9 →
padding-top: 56.25%（9 ÷ 16 = 0.5625） - 9:16（竖屏）→
padding-top: 177.777%（16 ÷ 9 ≈ 1.77777） - 必须给父容器设
position: relative，子video设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 注意：如果父容器有
border或padding，会影响实际宽高比，建议用box-sizing: border-box
video 元素本身要不要设 width/height
不要设内联 width 或 height 属性，也不要写 video { width: 100%; height: auto } 这类规则——它会强行拉伸画面，破坏原始宽高比，尤其当父容器已用 aspect-ratio 或 padding-hack 控制比例时。
- 正确做法：只控制容器尺寸，让
video自己按 intrinsic ratio 渲染 - 必要时加
object-fit: cover或object-fit: contain，防止黑边或裁剪异常 - 移动端 Safari 对
object-fit支持良好（iOS 9+），但老 Android（4.4）不支持，需确认目标用户范围
aspect-ratio + object-fit 组合的兼容性陷阱
aspect-ratio 和 object-fit 看似完美，但组合后在部分安卓机型上会出现“容器有比例、video 却没填满”的问题——根本原因是 object-fit 的渲染时机晚于容器布局，导致初始帧错位。
- 临时缓解：给
video加vertical-align: top，消除行内元素默认基线对齐带来的微小偏移 - 更可靠的做法：用
video { display: block }，彻底脱离 inline 布局流 - 真机测试重点：华为 EMUI 11（Chrome 79 内核）、小米 MIUI 12（WebView 77），这些系统自带浏览器对新 CSS 特性支持参差不齐
复杂点在于，你没法只靠一个 CSS 规则一劳永逸；得先判断运行环境，再决定走原生 aspect-ratio 路线，还是回退到 padding-hack。而检测 aspect-ratio 是否生效，只能靠 JS 查询 computedStyle，但那又引入了 JS 依赖——所以实际项目里，往往直接双写：先写 padding-hack，再叠一层 aspect-ratio 覆盖现代浏览器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
