移动端视频溢出屏幕的根源是body默认边距未清除+竖屏视口计算偏差，解决方案为：body{margin:0;overflow-x:hidden}、video{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}，容器用position:absolute而非fixed。
移动端视频超出屏幕，根本不是视频本身“太大”，而是浏览器在竖屏下对视口宽度的计算偏差 + body 默认边距没清干净，导致水平方向多出几像素，触发横向滚动条。
移动端竖屏下overflow-x: hidden必须加在body上
很多方案只给视频父容器加 overflow: hidden，但无效——因为溢出源头不在视频内部，而在 body 边界外。iOS Safari、安卓微信内置浏览器在竖屏时会把地址栏收起/展开，导致 100vw 瞬间略大于实际可视宽度，多出的 1–3px 就足以触发横向滚动。
-
body { margin: 0; overflow-x: hidden; }是底线操作，缺一不可 - 不要只依赖
html { width: 100%; height: 100%; }，它不解决水平溢出 - 若用了 Tailwind，确保
body没被其他 class（比如mx-auto）悄悄加了margin
video 设 width: 100% + height: 100% 会破坏 object-fit 行为
原生 video 是替换元素，默认 display: inline，设固定宽高会强制拉伸，干扰 object-fit: cover 的裁剪逻辑，尤其在尺寸未稳定时（比如加载中、横竖屏切换瞬间）。
- 正确写法：
video { display: block; width: 100%; height: 100%; object-fit: cover; } - 必须加
display: block，否则 Safari 下object-fit可能失效 - 避免同时写
max-width: 100%和width: 100%，后者已足够
父容器用 position: fixed 还是 position: absolute？
多数场景该选 absolute，fixed 在移动端有隐藏陷阱：Safari 会自动暂停、强制全屏控件弹出，且滚动时视频“消失”，下方内容失去背景支撑。
- 推荐组合：
.video-container { position: relative; height: 100vh; }+video { position: absolute; inset: 0; } - 用
inset: 0替代top: 0; left: 0; right: 0; bottom: 0，更简洁且兼容性一致 - 若坚持用
fixed，务必加z-index: -1，否则可能遮挡点击区域
object-position 不写就是左上角，人脸常被切掉
object-fit: cover 只决定“是否裁剪”，不决定“裁哪部分”。默认 object-position: 0 0，也就是从左上角开始取画面——人站在画面中间？那头和脚大概率被切掉。
- 必须显式声明：
object-position: center center - 想突出上半身（比如演讲视频），可试
object-position: top center，但得实测关键帧位置 - 这个属性只有和
object-fit同时存在才生效，单独写会被忽略
真正卡住人的点，往往不是 CSS 写错了，而是 body 的 margin 没清、video 的 display 没设成 block、或者 object-position 完全忘了写——这三处漏掉任何一项，都会让视频在某台手机上突然偏移或溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
