应使用 100dvh 替代 100vh 解决 ios safari 中可视区域变化导致的高度错位问题，需配合 viewport-fit=cover 的 meta 标签并前置声明 100vh 作为兼容兜底。
直接用 <video></video> 标签，别碰 background-image —— 浏览器根本不支持视频地址作为 CSS 背景值，写了也白写。
为什么width: 100vw; height: 100vh会出问题
它看似铺满，实则在滚动条出现、iOS 地址栏收放、缩放页面时频繁露白或错位。视口单位（vh/vw）反映的是“初始视口”，不是“当前稳定视口”。
- 正确做法是用
position: fixed; top: 0; left: 0; width: 100%; height: 100%，让元素真正钉死在视口四角 -
width: 100%和height: 100%继承自 fixed 容器，不受文档流干扰，稳定性远高于vw/vh - 必须配
object-fit: cover，否则视频会被拉伸或留黑边；min-width: 100%或min-height: 100%会破坏object-fit行为，一律禁用
autoplay 不生效？检查这四个属性是否齐全
Chrome、Firefox、Safari 对有声自动播放拦截极严，静音是硬门槛，缺一不可。
-
muted：必须显式写，不能靠 JS 后续设置（时机太晚） -
autoplay：触发播放逻辑的开关 -
playsinline：iOS Safari 的生死线，不加就跳原生全屏播放器 -
preload="auto"：浏览器默认只加载元数据（preload="metadata"），首帧黑屏 2–3 秒就是它导致的
HTML 中应写成：<video muted autoplay playsinline preload="auto" loop></video>
移动端闪动、固定失效、滚动卡顿怎么破
iOS Safari 对 background-attachment: fixed 的降级策略无法绕过，但 <video></video> 本身走的是另一套合成路径——关键在让它进 GPU 合成层。
- 给
<video></video>或其父容器加transform: translateZ(0)或will-change: transform - 确保该视频层
z-index: -1，且所有内容（文字、按钮）都在独立的、非 fixed 的容器里，否则触摸事件可能穿透 - 绝对不要把交互元素（如表单、链接）放在 video 标签内部或同级 fixed 层中
- 真机测试比模拟器可靠得多；iOS 17+ 对
playsinline更宽容，但 iOS 15/16 仍需严格校验
兼容性与降级必须做，不能赌用户设备
WebM 在 Firefox 支持好，但 Safari 旧版本不认；MP4 是底线，但只写一个格式等于放弃部分桌面用户。
- 提供双
<source></source>：<source src="bg.mp4" type="video/mp4"></source>+<source src="bg.webm" type="video/webm"></source> - 用
poster属性设封面图，防加载空白；CSS 可加background-image: url(fallback.jpg)作兜底 - 移动端建议用媒体查询降级：
@media (max-width: 768px) { .video-background { display: none; } .video-background::before { background-image: url(mobile-bg.jpg); } } - 视频导出推荐 H.264 编码、1280×720 分辨率、2000 kbps 码率，控制在 3–5 MB 内；超过 8 MB 就该考虑懒加载或首帧占位策略
最难的从来不是让视频铺满屏幕，而是它在横竖屏切换、深色模式开启、系统缩放调到 125%、甚至用户突然打开阅读模式时，依然不崩、不闪、不抢焦点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
