多屏幕协同的核心是状态驱动渲染，依赖viewport元标签正确配置、matchMedia动态控制DOM结构及单源驱动视频同步。
多屏幕协同不是靠复制 DOM 或监听 resize 就能解决的；真正同步的关键在于「状态驱动渲染」——DOM 结构本身不主动适配，而是由统一的状态源（比如视口宽度、媒体查询匹配结果、用户交互标记）触发重排或条件挂载。
viewport 元标签写错会导致所有后续同步失效
几乎所有多屏 DOM 同步异常（如小屏下仍显示桌面导航、左右栏错位、Canvas 视频撕裂）都源于 <meta name="viewport" content="width=device-width, initial-scale=1"> 缺失或参数错误。它不是“锦上添花”，而是现代浏览器启用响应式渲染管线的开关。
- 常见错误：漏掉
initial-scale=1，导致 iOS Safari 自动缩放至 0.5，matchMedia返回的matches值与真实视口不符 - 更隐蔽的问题：该标签未放在
最顶部，被其他 CSS 或 JS 阻塞，造成首次渲染时布局错乱 - 验证方式：在 DevTools 的 Device Toolbar 中切换设备后，检查
document.documentElement.clientWidth是否接近屏幕物理宽度（非 980px）
用 matchMedia + classList 切换 DOM 分支比 display:none 更可靠
单纯靠 CSS 的 @media (max-width: 768px) { .nav-desktop { display: none } } 无法保证 DOM 节点生命周期一致——小屏下隐藏的桌面导航仍存在于内存中，可能意外触发事件监听或影响 Canvas 绘制上下文。
- 推荐做法：用
window.matchMedia("(max-width: 768px)").matches判断，并通过element.classList.toggle("mobile-mode", matches)控制类名，再由 CSS 控制显隐或结构 - 进阶场景（如三栏视频布局）：在
change回调中动态appendChild()或replaceWith()不同结构的 DOM 片段，确保每种视口只存在一套真实节点 - 注意：不要在
matchMedia回调里直接操作style.display，这会绕过 CSS 层级控制，且无法与 transition 配合
多个 video 元素同步播放必须避免独立 currentTime 设置
直接对多个 <video id="v1"></video>、<video id="v2"></video> 分别调用 v1.currentTime = v2.currentTime = t 会因浏览器调度差异产生 50–200ms 漂移，尤其在 WebKit 内核下明显。
立即学习“前端免费学习笔记（深入）”；
- 正确路径是单源驱动：
const mainVideo = document.getElementById("vid-main")，其余视频仅作为 Canvas 绘制目标或通过captureStream()接入 - 若必须用多个原生
<video></video>，则只监听mainVideo的timeupdate，并在节流后批量设置其余视频的currentTime和play()，且全部加muted - 跨域视频需服务端返回
Access-Control-Allow-Origin: *，否则currentTime设置静默失败，但play()仍可能执行——造成“播放了但卡在第 0 帧”
真正难的不是写多少 media query，而是判断哪些 DOM 节点该“活”在哪个视口里；一旦把结构拆解成按状态挂载的片段，同步就从“修 bug”变成“维护状态映射表”。
