移动端背景视频不播放需同时设置playsinline和muted属性，缺一不可；还需确保type属性与实际格式一致（如.mp4对应video/mp4）、编码为H.264、添加poster兜底，并用object-fit等CSS控制显示。
移动端背景视频不播放？先确认 video 标签是否加了 playsinline 和 muted
iOS Safari（包括 iPhone 和 iPad）默认禁止自动播放带声音的全屏视频，且会强制进入全屏模式——这会导致背景视频在移动端直接黑屏或跳转到原生播放器。解决办法不是靠媒体查询，而是 HTML 层必须写对两个关键属性：playsinline（允许内联播放）、muted（静音）。缺一不可。
常见错误写法：<video autoplay loop> —— 这在 iOS 上几乎必然失效。
正确基础结构应为：
<video autoplay loop muted playsinline poster="placeholder.jpg"> <source src="bg-desktop.mp4" type="video/mp4"> </video>
注意：poster 是必需的降级兜底，否则 iOS 加载失败时会留白。
立即学习“前端免费学习笔记（深入）”；
@media 里不能切换 <source>，但可以控制 video 的尺寸与定位行为
CSS 媒体查询无法动态替换 HTML 中的 <source> 标签，所以别试图在 @media (max-width: 768px) 里用 CSS 改 src——这根本做不到。真正能做的，是通过媒体查询调整 video 元素自身的渲染表现：
- 用
object-fit: cover配合width: 100vw; height: 100vh保证桌面端铺满且不拉伸 - 在移动端改用
min-height: 100vh+height: auto，防止短内容下视频被裁太多 - 对小屏加
transform: scale(1.1)微调构图（弥补因object-fit: cover裁剪导致的关键区域丢失） - 禁用移动端的
pointer-events: none（默认已有），但确保父容器没意外加overflow: hidden截断视频
为什么写了 @media (max-width: 768px) 却没生效？检查三件事
媒体查询不触发，90% 不是写法问题，而是环境缺失：
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须存在且放在<head>最前面，否则移动端视口宽度恒为 980px，max-width: 768px永远不匹配 - 不要混用
min-width和max-width：同一套逻辑统一用min-width（移动优先），例如@media (min-width: 768px)控制平板以上，@media (min-width: 1200px)控制桌面，边界更稳 - Chrome DevTools 的「Toggle device toolbar」要真机刷新测试，仅缩放窗口不会触发 DPR 或 viewport 变化，容易误判
高清屏（2x/3x）下背景视频模糊？这不是媒体查询能解决的
视频本身没有“@2x”概念，min-resolution 媒体查询对 <video> 无效。所谓“高清适配”，实际是两件事：
- 视频源分辨率需 ≥ 设备物理像素宽度 × 高度（例如 iPhone 13 Pro Max 横屏约 2778×1284px，视频至少 4K 才不糊）
- 用
object-fit: cover时，确保视频关键帧居中——否则高 DPR 下裁剪放大后主体偏移更明显 - 若必须分发不同码率，得靠服务端 User-Agent 判断或 JS 动态换
src，CSS 无能为力
真正容易被忽略的是：视频编码格式。Safari 对 H.265（HEVC）支持有限，移动端务必提供 H.264 baseline profile 的 MP4 作为 fallback，否则部分 Android 旧机型和 iOS 14 以下直接不加载。
