HTML5视频移动端全屏需协同viewport设置、object-fit控制与全屏事件监听：设viewport禁缩放，用object-fit:cover/contain/fill配合object-position:center，监听fullscreenchange动态调整容器尺寸，并针对iOS限制采用playsinline降级方案。
HTML5视频在移动端全屏时默认会按原始宽高比缩放，常出现黑边、拉伸或裁剪问题。核心在于控制object-fit、视口设置与全屏API行为的协同，而非单纯调CSS。
确保viewport适配并禁用缩放干扰
移动端浏览器缩放会破坏视频全屏渲染逻辑，需在中严格设置：
- 添加
，避免双击/手势缩放导致视口错位 - 若页面本身允许缩放，应在进入视频全屏前临时禁用（监听
webkitbeginfullscreen等事件动态修改meta） - iOS Safari对
initial-scale敏感，建议固定为1.0，不使用device-width以外的宽度值
用object-fit精准控制全屏填充模式
视频元素在video::-webkit-media-controls-panel或全屏后容器尺寸变化时，仅靠width:100%; height:100%无法保证视觉一致性，必须配合object-fit：
object-fit: cover：保持比例铺满，可能裁剪上下或左右——适合横屏视频占满竖屏视口object-fit: contain：完整显示，留黑边——适合对画面完整性要求高的场景（如教学演示）object-fit: fill：强制拉伸填满——慎用，易失真；仅适用于背景视频等非关键内容- 务必加
object-position: center，防止裁剪偏移（尤其Android部分机型默认左上对齐）
监听全屏状态并动态调整容器与视频样式
移动端全屏触发机制碎片化（iOS用webkitenterfullscreen，Android多用fullscreenchange），需统一处理：
- 监听
fullscreenchange事件，在进入全屏后立即给父容器设position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999 - iOS Safari全屏时会隐藏地址栏，导致
vh计算偏差（从100vh变为约110vh），可改用100dvh（支持Chrome 100+/Safari 16.4+）或用screen.height动态设置高度 - 退出全屏后，重置容器为相对定位，并清除内联height/style，避免影响后续布局
绕过iOS Safari全屏限制的兼容方案
iOS Safari对全屏有硬性限制（仅允许用户手势触发、禁止JS自动调用requestFullscreen()），且默认启用“画中画”替代全屏：
- 为
添加webkit-playsinline和playsinline属性，允许内联播放，再通过CSS模拟全屏（如transform: scale(2)+overflow: hidden） - 检测
document.webkitFullscreenEnabled === false时，降级使用video.parentElement.requestFullscreen()或自定义全屏层包裹video - 避免依赖
video.webkitSupportsFullscreen，该API已废弃；改用document.fullscreenEnabled+ UA判断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
