移动端横屏全屏视频需HTML属性（muted="true"、playsinline、autoplay、preload="metadata"）、100dvh替代100vh、body{overflow-x:hidden}裁剪溢出、object-position微调焦点，缺一不可。
移动端横屏全屏视频界面不是靠 object-fit 或媒体查询“切一下尺寸”就能稳的，核心矛盾是：浏览器强制全屏跳转、地址栏高度抖动、视口单位失效、关键内容被裁——这些必须在 HTML 层、CSS 层、JS 层协同拦截。
video 必须带这四个 HTML 属性，缺一不可
iOS Safari 和 Android Chrome 对自动播放有硬性组合要求，单独写 autoplay 等于没写：
-
muted="true"：不是加muted就行，显式写muted="true"更稳；空属性在部分 iOS 版本会被忽略 -
playsinline：没有它，iOS 会强制跳原生全屏播放器，整个页面布局崩掉 -
autoplay：必须和muted同时存在才可能触发；仅声明不保证播放，但缺了就直接卡首帧 -
preload="metadata"：比auto更轻量，避免流量浪费；none会导致用户滑到视频区域时仍黑屏
错误写法：<video autoplay></video>｜正确写法：<video autoplay muted="true" playsinline preload="metadata" loop></video>
用 100dvh 替代 100vh，避开 iOS 地址栏抖动
在 iPhone Safari 中，竖屏→横屏→再竖屏过程中，100vh 会随地址栏收放从 812px 跳到 896px（以 iPhone 14 Pro 为例），导致视频突然上移或留白。而 dvh（dynamic viewport height）是 CSS 新单位，始终代表“当前可用视口高度”，不随地址栏变化。
立即学习“前端免费学习笔记（深入）”；
- 设 video 父容器或 video 自身：
height: 100dvh;（需配合width: 100vw;） - 注意兼容性：
dvh在 Safari 16.4+、Chrome 105+、Firefox 110+ 支持；旧版可 fallback 到100vh，但要接受抖动 - 别只改 height：如果横屏时希望视频宽度撑满屏幕，
width: 100vw是必须的，否则会缩在中间
body 溢出必须手动裁剪，overflow-x: hidden 不是可选项
即使 video 设了 position: fixed; width: 100vw; height: 100dvh; object-fit: cover;，移动端（尤其安卓微信、部分三星浏览器）仍会因渲染精度问题让 video 实际宽度略超 100vw，触发水平滚动条——这不是 bug，是事实。
- 必须写：
body { margin: 0; overflow-x: hidden; }（margin: 0防 body 默认 8px 外边距漏白） - 不要只给 video 加
overflow: hidden：它只裁子元素，不影响自身溢出 - 如果用了 Tailwind，对应类是
overflow-x-hidden，但得确保它作用在上，而不是某个 wrapper div
横屏时关键内容被裁？用 object-position 微调焦点
object-fit: cover 会等比缩放并居中裁剪，但移动端横屏比例（如 19.5:9）和视频源（16:9）不一致，人物头部、按钮区域常被切掉。
- 加
object-position: 50% 30%;把焦点往上提，保人脸；object-position: 20% 50%;往左偏，保左侧操作区 - 百分比值支持小数，比如
object-position: 52.3% 28.7%;，适合反复调试后固化 - 不能靠 JS 动态算：横屏切换时
orientationchange事件不可靠，且 Safari 已弃用；优先用 CSS 媒体查询 + 固定偏移
真正难的不是写对那几行 CSS，而是所有条件必须同时满足：HTML 属性对、viewport meta 存在、body 溢出裁剪、视口单位选对、裁剪焦点调准——漏掉任意一环，横屏那一刻就会露馅。
