video 元素是替换元素，其宽高比由视频元数据决定，css 的 aspect-ratio 对其无效；必须用容器（如 .video-wrapper）设 aspect-ratio: 16 / 9、width: 100%，video 设 width: 100%、height: 100%、object-fit: contain/cover，并加 overflow: hidden；旧版 safari/webview 需 @supports 降级为 padding-top: 56.25% 方案。
直接在 video 上写 aspect-ratio: 16 / 9 没用，浏览器会忽略——这不是你写错了，是规范限制；必须用容器控制比例，并配齐 width、object-fit 和降级逻辑，否则手机上不是压成一条线，就是左右/上下黑边或裁切。
为什么 video { aspect-ratio: 16 / 9 } 在手机上完全不生效
video 是替换元素（replaced element），它的宽高比由视频文件自身的元数据决定，CSS 的 aspect-ratio 对它无效。你在 Safari 或 Chrome 开发者工具里能看到该声明标为 “inactive”，computed height 往往是 0px 或 auto。常见现象包括：
- 页面刚加载时只显示一条细线（高度塌陷）
- 横竖屏切换后比例错乱，尤其 iOS Safari 15.4–16.3 在
display: flex父容器中直接忽略aspect-ratio - 后端返回不同比例（如
9 / 16）时硬写死16 / 9，导致内容被裁或留大片黑边
正确做法：三层结构缺一不可
核心就三步，漏任何一项都会导致比例失控或 CLS（布局偏移）：
- 用
<div class="video-wrapper"> 包裹 <code><video></video>，并移除video标签上的width和height属性（如width="640"），否则会覆盖 CSS 控制 -
.video-wrapper必须设width: 100%（或明确的max-width），再加aspect-ratio: 16 / 9；单独写aspect-ratio会导致容器塌陷 -
video元素设width: 100%、height: 100%、object-fit: contain（要保全内容不裁切）或cover（要填满无黑边），并给.video-wrapper加overflow: hidden防止溢出 - iOS Safari 15.2 及更早版本、Android WebView 旧内核（如某些厂商定制版）会完全忽略该声明，容器高度为
0 - 必须用
@supports (aspect-ratio: 1 / 1)包裹现代样式，降级方案写在外部，不能平铺 - 兜底用
padding-top: 56.25%（注意是56.25，不是56.2或56）+position: relative/absolute，父容器不能有height值，否则压垮 padding 计算 - 若项目仍需支持 IE 或极老安卓 WebView，纯 CSS 不够用，得回退到 JS 动态计算比例
- 忘了配
object-fit或漏了overflow: hidden，视频可能拉伸变形、边缘溢出，反而放大视觉跳动 - 在 SSR 或懒加载场景下，若
.video-wrapper没触发 BFC（比如没设display: block或position: relative），首次渲染仍可能高度为0——这个点调试时很难定位，得靠 computed styles 看实际 height - 动态比例（如后端返回
{ w: 3840, h: 2160 }）必须约分为最简整数比（16 / 9），别用小数1.777，精度误差易引发1px黑边
移动端兼容性必须分层处理
不是所有手机浏览器都支持 aspect-ratio，尤其真机测试常被忽略：
容易被忽略的渲染边界和细节
很多人以为设了 aspect-ratio 就万事大吉，其实它只管容器盒子尺寸，不管内部怎么显示：
