video加object-fit: cover仍显黑边，因未设width/height占满父容器或父容器无明确尺寸；全屏时object-fit失效属正常，应区分原生全屏（无视CSS）与CSS模拟全屏（依赖object-fit）。
video元素加object-fit: cover后还是显示黑边？
直接加object-fit: cover没用，是因为video默认有固有宽高比（比如16:9），而父容器尺寸不匹配时，浏览器会优先尊重视频原始比例再裁剪——但前提是video本身得“撑满”容器。常见错误是忘了设width: 100%; height: 100%，或者父容器没限定尺寸。
实操要点：
-
video必须显式设置width: 100%; height: 100%（或flex: 1等能占满父容器的方式） - 父容器需有明确宽高，比如
height: 100vh或通过aspect-ratio控制比例 - 避免给
video设max-width/max-height，它们会干扰cover的裁剪逻辑 - 移动端Safari对
object-fit支持良好（iOS 9.3+），但老Android WebView（如4.4）可能不支持，需降级处理
如何让全屏video在横竖屏切换时始终cover且无跳动？
横竖屏切换时，video宽高重算、object-fit重新生效，但若父容器依赖vh单位，Safari在地址栏收放时会触发resize事件并短暂改变vh值，导致画面抽搐。
稳定方案：
- 用
aspect-ratio: 16 / 9替代height: 56.25vw这类计算，更可靠 - 监听
orientationchange而非resize，减少误触发 - 给
video加will-change: transform（仅iOS Safari必要，可缓解重绘卡顿） - 禁用双指缩放：
，否则缩放会破坏cover效果
video全屏API调用后object-fit失效怎么办？
调用video.requestFullscreen()后，浏览器进入原生全屏模式，此时video脱离CSS流，所有样式（包括object-fit）被忽略，显示为原始比例+黑边。
解决路径有限但明确：
- 不要依赖
object-fit控制全屏状态下的画面——它本就不生效 - 改用
video.webkitEnterFullscreen()（iOS）或video.play().then(() => video.webkitEnterFullscreen())，唤起原生全屏控件，由系统裁剪 - 若必须自定义全屏样式（如隐藏控件、铺满），只能用
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;模拟，并手动监听fullscreenchange切换类名 - 注意：模拟全屏下
object-fit: cover才真正起效，但需确保video父容器是fixed定位且无padding/margin干扰
Android低端机上cover裁剪错位怎么调？
部分Android 5–6 WebView中，object-fit: cover对video的支持存在渲染bug：裁剪区域偏移，顶部/底部多出几像素黑边，尤其在transform: scale(1)或backface-visibility: hidden共存时更明显。
绕过方式更偏向hack：
- 加
video { transform: translateZ(0); }强制GPU加速，常能修正错位 - 用
overflow: hidden包裹video的父容器，配合margin: -2px微调（数值按设备实测） - 放弃
cover，改用object-fit: fill+ JS动态计算videoWidth/videoHeight与容器比例，再设scale和translate——复杂但可控 - 检测
navigator.userAgent含Android 5或WebView时，降级为width: 100%; height: auto;并居中显示，接受少量黑边换稳定性
实际适配中最容易被忽略的是：全屏行为分「浏览器原生全屏」和「CSS模拟全屏」两种路径，前者无视CSS，后者才依赖object-fit；选错路径，所有样式调试都是白忙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
