多路输出不改变HTML布局函数行为，但会放大对screen.width等属性的误用；screen.width始终返回主屏信息，应改用document.documentElement.clientWidth或matchMedia；Canvas需动态同步devicePixelRatio；窗口定位推荐Chromium的getScreens() API；跨屏通信须用postMessage。
多路输出（比如双屏、三屏扩展）本身不改变 HTML 布局函数的行为，但会放大你对 window.screen、document.documentElement.clientWidth、devicePixelRatio 等值的误用——选错工具或写法，轻则副屏内容错位、Canvas 模糊，重则控制台报错、事件监听失效。
别用 screen.width 做布局判断，它永远只返回主屏信息
这是最常踩的坑：写 if (screen.width > 1920) 来切分屏样式，结果窗口拖到副屏后逻辑全崩。因为 screen.width 是只读静态值，始终等于系统主显示器的 availWidth，和当前窗口在哪块屏上毫无关系。
- 真正反映当前窗口可视区域宽度的是
document.documentElement.clientWidth（CSS 像素），它随窗口缩放、跨屏拖动实时变化 - 要响应视口变化，用
matchMedia("(min-width: 1200px)")而非screen.width，媒体查询天然适配多屏独立视口 - 若需获取当前窗口物理坐标（比如弹窗定位到副屏），必须组合
window.screenX、window.screenY、window.outerWidth、window.outerHeight推算，不能硬编码偏移量
Canvas 渲染模糊？检查是否动态同步了 devicePixelRatio
多路输出常见 DPI 不一致（笔记本屏 2x，外接 HDMI 屏 1x），Canvas 模糊不是“多屏导致”，而是初始化时没按当前屏幕的 devicePixelRatio 重设缓冲区。
- 每次创建或 resize Canvas 前，必须重新读取
const dpr = window.devicePixelRatio，不能缓存 - 设置 DOM 属性：
canvas.width = Math.floor(width * dpr)、canvas.height = Math.floor(height * dpr) - 设置 CSS 样式：
canvas.style.width = width + "px"、canvas.style.height = height + "px" - 绘图前调用
ctx.scale(dpr, dpr)，否则所有坐标都要手动乘 dpr，极易遗漏
需要精确控制窗口位置？优先用 Chromium 的 getScreens() API
纯浏览器环境没有标准方式枚举多显示器物理布局，window.open() 的 left/top 参数在 Chrome 91+ 默认被禁用，且坐标系以主屏为原点（副屏可能是负值）。唯一可靠方案是 Window Placement API。
立即学习“前端免费学习笔记（深入）”；
- 仅 Chromium 112+ 支持，需 HTTPS、用户手势触发（如按钮点击）、显式请求权限：
navigator.permissions.query({name: "window-placement"}) - 调用
await window.getScreens()返回数组，每个Screen对象含left、top、width、height（设备像素）和scale - 注意：
left/top是设备像素，需除以window.devicePixelRatio才能用于window.moveTo()（CSS 像素） - Firefox 和 Safari 当前无等效替代，Electron 是生产环境更稳的选择
分屏内容协同？用 postMessage 而非全局变量
多路输出下打开多个窗口（如 window.open("panel.html")）很常见，但各窗口 JS 上下文完全隔离。想让主屏操作触发副屏更新，不能靠 window.opener.xxx 直接读写，必须走跨域通信机制。
- 确保同源，主窗口用
childWindow.postMessage(data, origin)发送消息，副屏监听window.addEventListener("message", handler) - 必须校验
event.origin，防止恶意页面伪造消息 - 避免在
message回调里直接操作 DOM，先用requestAnimationFrame批量更新，减少重排 - 不要依赖
window.focus()或window.blur()判断哪屏是“当前”，多屏下焦点状态不可靠
多路输出不是新问题，只是把老问题照得更清楚：HTML 布局函数本身不感知屏幕数量，但你的代码是否真正在用“当前窗口”的数据，决定了它在副屏上是正常工作还是静默崩溃。最危险的不是报错，而是 screen.width 那种看起来“能跑”，实则逻辑错位的假成功。
