移动端全屏视频背景出现横向溢出，通常表现在页面明明只应该显示100%视口宽度，却多出一段横向滚动距离，背景视频右侧被裁切或者露出空白。这个问题的本质是视频元素和容器之间至少有一个宽度约束没有闭合。先从移动端浏览器如何处理width: 100vw说起：桌面浏览器滚动条会占用视口宽度，移动端浏览器虽然默认不显示传统滚动条，但动态工具栏、缩放手势以及页面默认margin都可能让100vw比实际可视区域更宽。因此仅仅设置width: 100vw并不能作为防溢出的唯一手段。
接着需要关注的是视频元素自身的固有尺寸。一个横屏拍摄的1920×1080视频在没有任何CSS限制时，浏览器会按照原始宽高比参与布局。如果容器只设置了width: 100%而没有同时限制高度和overflow，视频高度会按照比例自动升高，宽度也可能因为内联默认样式或继承关系突破容器。移动端全屏背景更推荐使用绝对定位把视频从正常文档流中拿出来，再通过object-fit控制画面填充方式。
一、横向溢出的几个典型来源
首先要排查的是<body>或根容器是否残留默认间距。移动端浏览器不会自动清除<body>的margin，如果页面结构中没有类似margin: 0的基础重置，100vw加上8px默认外边距就会立刻产生横向滚动条。这种溢出与视频无关，但经常在全屏背景方案里被误判为视频问题。可以先在全局样式中写入：
html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
第二个来源是<video>标签在移动端被浏览器赋予的默认样式并不统一。部分安卓浏览器会给视频元素添加display: inline或基线对齐引起的额外空隙，还有些WebView会保留视频控件占位高度。建议把<video>显式设置为display: block，并配合max-width: 100%，避免inline元素底部空隙和宽度计算偏差。第三个来源是当视频作为背景绝对定位时，只写left: 0; right: 0而未锁定宽度，某些老版本浏览器会按内容宽度计算，导致绝对定位元素溢出。更稳妥的做法是同时写width: 100%、height: 100%，再使用object-fit: cover。
二、用 object-fit 与容器约束构建防溢出基础
处理全屏视频背景，通常不需要让视频元素参与普通布局。把外层容器固定在视口范围内，视频元素填满容器，再用object-fit: cover保持画面比例并裁剪超出部分。这样即便视频原始宽高比和手机屏幕不一致，也不会改变容器尺寸。关键CSS如下：
.video-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.video-bg video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
display: block;
background: #000;
}
这里视频元素先被拉伸到与容器完全一致，再由object-fit: cover按比例放大并裁剪。由于overflow: hidden在容器上，任何超出部分都被裁掉，不会形成横向滚动条。position: fixed则让背景相对于视口固定，移动端滚动时不会跟着内容移动。需要注意的是z-index: -1虽然可以把视频放到内容后方，但在部分安卓WebView上可能会被父级层叠上下文影响，更推荐使用z-index: 0配合内容区position: relative; z-index: 1来稳定排列。
如果项目还需要兼容不支持object-fit的旧浏览器，可以退回到传统做法：视频元素设置min-width: 100%; min-height: 100%，不写固定的width和height，再利用绝对定位居中。不过现代移动端浏览器基本都支持object-fit，优先使用它维护成本更低。
三、移动端动态视口与 iOS Safari 的特殊处理
横向溢出还可能与100vh高度计算有关。iOS Safari中地址栏和底部工具栏在滚动时收缩或展开，会改变实际可视区域高度。传统100vh等于浏览器窗口高度，当地址栏收起时，100vh比真正可视区域高，视频底部可能延伸到屏幕外；当地址栏展开时，100vh又可能比可视区域矮，出现背景覆盖不全。虽然这主要表现为纵向问题，但为了弥补高度差，开发者有时会额外增加容器高度，间接导致横向布局被重新计算。推荐使用动态视口单位dvh：
.video-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100dvh;
overflow: hidden;
}
@supports not (height: 100dvh) {
.video-bg {
height: 100vh;
}
}
这段代码优先使用100dvh，在支持动态视口的浏览器中跟随地址栏变化实时调整高度；不支持的浏览器回退到100vh。宽度方面同样可以考虑100%代替100vw，因为100%基于父容器计算，在多数场景下比100vw更不容易受到滚动条影响。
另一个容易被忽略的是横屏视频在手机上全屏背景时的缩放。如果使用transform: scale()强制放大视频，但没有重新设定transform-origin，视频会从中心向外扩展，可能产生左侧或右侧溢出。为避免这种情况，尽量用object-fit处理比例，不要手动用scale来模拟cover效果。
四、完整示例与验证清单
下面给出一个完整的移动端全屏视频背景HTML结构，包含基础重置、固定背景容器、视频元素和前置内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
overflow-x: hidden;
}
.video-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100dvh;
overflow: hidden;
z-index: 0;
}
.video-bg video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
display: block;
}
.page-content {
position: relative;
z-index: 1;
color: #fff;
padding: 20px;
}
</style>
</head>
<body>
<div class="video-bg">
<video autoplay muted loop playsinline>
<source src="bg.mp4" type="video/mp4" />
</video>
</div>
<div class="page-content">
<h1>移动端全屏视频背景</h1>
</div>
</body>
</html>
验证时可以用Chrome DevTools切到移动端模拟器，重点检查document.documentElement.scrollWidth是否大于document.documentElement.clientWidth。如果大于，说明仍存在横向溢出，继续排查是否有元素宽度超过视口。常见残余来源包括：其他绝对定位元素使用width: 100vw、盒子模型未设置box-sizing: border-box导致padding撑开宽度、以及 iframe 或图片未限制max-width: 100%。逐项排除后，全屏视频背景的横向溢出问题基本可以解决。
最后补充一点：如果背景视频不需与用户交互，建议统一加上aria-hidden="true"和tabindex="-1"，避免移动端读屏软件或焦点导航把背景视频当成可操作元素。虽然这与横向溢出没有直接关系，但在全屏背景场景下是良好的无障碍实践。
移动端视频背景横向溢出object-fit修改时间：2026-10-07 08:06:44