video加object-fit: cover在手机上仍有黑边或滚动条，根本原因是该属性只控制裁剪方式，不强制容器铺满视口；必须同时设置video为width: 100%; height: 100%，父容器用position: fixed; width: 100vw; height: 100dvh，并重置body { margin: 0; overflow-x: hidden; }。
video加object-fit: cover为什么在手机上还是有黑边或滚动条
因为object-fit: cover只管“怎么裁”，不管“容器有没有真铺满视口”。移动端常见现象：左右出现滚动条、顶部/底部留白、横屏切换后突然偏移——根本不是object-fit失效，而是视频元素的盒模型没被强制撑开，或者父容器还在文档流里晃悠。
必须同时满足三件事：
– video自身设width: 100%; height: 100%（不能只靠100vw/100vh）
– 直接父容器用position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh（dvh比vh稳，iOS地址栏收放时不抖）
– body { margin: 0; overflow-x: hidden; }（漏掉overflow-x: hidden，安卓微信和Safari竖屏必出横向滚动条）
移动端自动播放失败的硬性条件缺了哪个
不是“加了autoplay就完事”，iOS和Android WebView对自动播放有明确拦截规则。缺任意一项，视频大概率卡在首帧或跳原生全屏。
四个HTML属性必须同时存在：
– muted="true"（不是可选，是策略前提；显式写true比空值更稳）
– playsinline（专治iOS Safari强制跳转，Chrome Android也依赖它保持内联）
– autoplay（必须和muted组合才生效）
– preload="metadata"或preload="auto"（禁用preload="none"，否则用户滑到页面时视频还没加载）
立即学习“前端免费学习笔记（深入）”；
示例写法：
<video autoplay muted playsinline preload="metadata" loop><br> <source src="bg.mp4" type="video/mp4"><br></video>
为什么iOS Safari横屏时视频突然偏移或留白
因为100vh在Safari中会随地址栏显示/隐藏动态变化，导致height抖动，object-fit: cover重新计算裁切锚点，画面就“抽”一下。这不是bug，是浏览器行为。
稳定方案：
– 优先用height: 100dvh（Chrome 108+ / Safari 16.4+ 支持，2026年已成主流）
– 降级 fallback：用min-height: 100% + position: fixed + object-fit: cover
– 避免监听resize做重绘，改用orientationchange事件（更精准，不误触发）
– 对iOS Safari加will-change: transform（缓解重绘卡顿，实测有效）
video全屏API调用后object-fit: cover为啥失效
调用video.requestFullscreen()后，浏览器进入原生全屏模式，此时video脱离CSS渲染流，所有样式（包括object-fit）被忽略，画面按原始宽高比显示，必然黑边。
两种应对路径：
– 不要用object-fit控制原生全屏，那是系统的事；唤起原生控件用video.webkitEnterFullscreen()（iOS）或video.play().then(() => video.webkitEnterFullscreen())
– 如果必须自定义全屏样式（比如隐藏控件、铺满），就别调全屏API，改用position: fixed模拟，并监听fullscreenchange手动切类名
– 注意：pointer-events: none得加在模拟全屏的video上，否则按钮点不到
真正难的不是写几行CSS，而是把HTML属性、viewport声明、JS播放时机、CSS层叠上下文、移动端视口单位抖动全串起来——漏一个，用户看到的就是空白、黑边或滚动条。
