怎样用CSS解决移动端视频播放器全屏适配的问题？-css教程-PHP中文网

video有黑边是因为object-fit只控制裁剪方式，未确保video铺满父容器；需同时设置video宽高100%、父容器fixed定位并用dvh、body无margin和隐藏横向滚动条。

怎样用css解决移动端视频播放器全屏适配的问题？

video加`object-fit: cover`为什么还是有黑边？

因为object-fit只管“怎么裁”，不管“有没有真铺满”。常见错误是只写了object-fit: cover，却没让video自身占满父容器，或父容器本身尺寸不明确。

必须同时满足三点：

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竖屏必出横向滚动条

Flex布局里`video`自适应失效怎么办？

当video直接作为display: flex子项时，即使写了max-width: 100%，也常被默认的min-width: auto锁死宽度，导致无法缩小。

这不是CSS写错了，而是flex布局优先级更高。稳妥解法只有两个：

给video加flex: 0 1 auto（不放大、可缩小、基准为内容尺寸）
更推荐：外层套，让容器承担flex占位职责，video只管自身响应式绝对不要同时写width: 100%和flex: 1——这会冲突，导致尺寸计算异常。全屏API调用后object-fit失效是正常现象调用video.requestFullscreen()后，浏览器进入原生全屏模式，video脱离CSS流，所有样式（包括object-fit）被忽略，显示为原始比例+黑边。 CSS工具箱(专业版) 全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。下载这不是bug，是规范行为。应对方式很明确：不要依赖object-fit控制原生全屏状态下的画面若需系统级全屏，改用video.webkitEnterFullscreen()（iOS）唤起原生控件，由系统裁剪若必须自定义全屏样式（如隐藏控件、铺满），只能用position: fixed; top: 0; left: 0; width: 100vw; height: 100vh模拟，并监听fullscreenchange事件切换类名注意：模拟全屏下object-fit: cover才真正起效，但需确保video父容器是fixed定位且无padding/margin干扰。老Android WebView或iOS 14.5以下怎么降级？ aspect-ratio在iOS 14.5以下或Android 4.4 WebView中不可靠，必须 fallback。最稳方案仍是padding-bottom技巧：外层容器设position: relative; width: 100%; padding-bottom: 56.25%; height: 0（16:9 → 9 ÷ 16 × 100%） video设position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain（完整显示，可能有黑边）或cover（无黑边但可能裁剪边缘）该方法在flex容器中也稳定，不会被flex: 1拉伸破坏比例关键细节：确保video标签不带原生width或height属性（如width="1920"），否则会覆盖CSS计算。