video元素在平板上默认拉伸是因viewport限制和容器尺寸挤压所致，应使用object-fit: contain锁定宽高比，并配合aspect-ratio或padding-bottom hack实现响应式比例容器，同时确保autoplay、muted、playsinline属性以适配ios策略。
video 元素默认拉伸行为与 viewport 限制
HTML5 <video></video> 在平板（尤其是 iOS Safari 和 Android Chrome）上默认会按容器宽高拉伸，而非保持原始宽高比。这不是 bug，而是浏览器对 width/height 属性的直接响应——只要设了固定像素值或 100%，就可能破坏比例。
关键约束来自 viewport：很多平板页面仍用 <meta name="viewport" content="width=device-width, initial-scale=1">，但若父容器（如 <div class="video-wrap">）本身被 flex/grid/absolute 定位挤压，<code><video></video> 就会优先服从容器尺寸而非 intrinsic ratio。
用 object-fit: contain 实现比例锁定
object-fit 是最轻量、兼容性足够（iOS 9.0+ / Android 4.4+）的解法。它不改变视频实际尺寸，只控制“如何填满容器”，类似图片的 background-size: contain。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
<video></video>设置明确的宽高（例如width: 100%; height: 200px;或用 aspect-ratio），再加object-fit: contain; - 避免同时设
width和height为100%—— 这会让容器失去比例锚点，contain失效 - 若需居中显示黑边，补上
object-position: center;（默认就是 center，但显式声明更稳妥） - 慎用
object-fit: cover：它会裁剪画面，平板横竖屏切换时容易切掉关键区域
响应式宽高比容器（aspect-ratio + padding-bottom hack）
当需要视频区域在不同平板尺寸下始终维持 16:9 或 4:3，仅靠 object-fit 不够——容器本身得有稳定比例。现代方案用 aspect-ratio，降级方案用 padding-bottom 百分比 hack。
示例（推荐双写保障兼容）：
.video-container {
position: relative;
width: 100%;
aspect-ratio: 16 / 9; /* 现代浏览器 */
}
.video-container::before {
content: "";
display: block;
padding-bottom: 56.25%; /* 9/16 = 56.25% for 16:9 */
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}注意：aspect-ratio 对 <video></video> 自身无效，必须作用于其父容器；而 padding-bottom hack 要求父容器 position: relative 且子元素 position: absolute 才能撑开高度。
autoplay/muted 与 iOS 平板的强制静音策略
即使比例锁定了，iOS 平板 Safari 仍可能因自动播放策略导致视频卡在首帧、不触发 loadedmetadata，进而让 JS 计算宽高比失败。这不是拉伸问题，但常被误判为“没生效”。
排查要点：
- 确保
<video></video>带autoplay和muted属性：<video autoplay muted playsinline></video> - 移除所有依赖
canplay或playing的 JS 尺寸重设逻辑——iOS 可能永远不触发这些事件 -
playsinline必须存在，否则 iPad 会全屏播放，脱离 CSS 控制范围 - 不要用 JS 动态设置
video.width/video.height—— 这会覆盖 CSS 的object-fit行为
真正难处理的是老款 Android 平板（如 Android 5.x 的三星 Tab），它们对 aspect-ratio 和 object-fit 支持极差，只能靠 JS 读取 video.videoWidth/video.videoHeight 后手动计算容器 padding-bottom，且必须等 loadedmetadata 后执行 —— 但这个事件在部分设备上延迟极高或根本不会来。
