HTML5视频移动端全屏需协同viewport设置、object-fit控制与全屏事件监听：设viewport禁缩放，用object-fit:cover/contain/fill配合object-position:center，监听fullscreenchange动态调整容器尺寸，并针对iOS限制采用playsinline降级方案。
HTML5视频在移动端全屏时默认会按原始宽高比缩放，常出现黑边、拉伸或裁剪问题。核心在于控制object-fit、视口设置与全屏API行为的协同，而非单纯调CSS。
确保viewport适配并禁用缩放干扰
移动端浏览器缩放会破坏视频全屏渲染逻辑，需在中严格设置：
- 添加
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，避免双击/手势缩放导致视口错位 - 若页面本身允许缩放，应在进入视频全屏前临时禁用（监听
webkitbeginfullscreen等事件动态修改meta） - iOS Safari对
initial-scale敏感，建议固定为1.0，不使用device-width以外的宽度值
用object-fit精准控制全屏填充模式
视频元素在video::-webkit-media-controls-panel或全屏后容器尺寸变化时，仅靠width:100%; height:100%无法保证视觉一致性，必须配合object-fit：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
object-fit: cover：保持比例铺满，可能裁剪上下或左右——适合横屏视频占满竖屏视口object-fit: contain：完整显示，留黑边——适合对画面完整性要求高的场景（如教学演示）object-fit: fill：强制拉伸填满——慎用，易失真；仅适用于背景视频等非关键内容- 务必加
object-position: center，防止裁剪偏移（尤其Android部分机型默认左上对齐）
监听全屏状态并动态调整容器与视频样式
移动端全屏触发机制碎片化（iOS用webkitenterfullscreen，Android多用fullscreenchange），需统一处理：
立即学习“前端免费学习笔记（深入）”；
- 监听
fullscreenchange事件，在进入全屏后立即给<video></video>父容器设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对<video></video>全屏有硬性限制（仅允许用户手势触发、禁止JS自动调用requestFullscreen()），且默认启用“画中画”替代全屏：
- 为
<video></video>添加webkit-playsinline和playsinline属性，允许内联播放，再通过CSS模拟全屏（如transform: scale(2)+overflow: hidden） - 检测
document.webkitFullscreenEnabled === false时，降级使用video.parentElement.requestFullscreen()或自定义全屏层包裹video - 避免依赖
video.webkitSupportsFullscreen，该API已废弃；改用document.fullscreenEnabled+ UA判断
