HTML/JS本身不感知多显示器，性能问题源于devicePixelRatio适配、screen属性误用及跨屏拖动无通知机制；Canvas模糊主因是未同步width/height与dpr，viewport和media query在多屏下不失效但需避免依赖screen.width。
HTML 函数本身不感知多显示器
浏览器里的 JavaScript 函数（比如 document.getElementById、window.addEventListener）完全不知道你接了几块屏——它们只管 DOM 和事件，不处理屏幕拓扑。所谓“多显示器下效率高不高”，其实是问：页面在扩展显示区域中渲染、响应、缩放时，有没有隐藏的性能陷阱或行为偏差。
- Canvas 绘图模糊？90% 是因为没同步
canvas.width/canvas.height和devicePixelRatio，和几块屏无关，但高分屏+多屏组合会让这问题更刺眼 - 窗口拖到副屏后
resize事件不触发？不是 bug，是浏览器行为：只有用户主动调整窗口尺寸才发，跨屏移动不算“resize” -
window.screen返回的是主屏信息，不是当前窗口所在屏；要获知当前窗口物理位置，得用window.screenX/window.screenY+window.outerWidth/outerHeight推算
viewport 和 media query 在多屏下会失效吗
不会失效，但容易误判。关键不在“多屏”，而在“多逻辑视口”——比如 Windows 上把浏览器窗口拉满左屏（1920×1080），又拉满右屏（同分辨率），两个窗口各自独立触发 @media (max-width: 1920px)，一切正常；但如果用 macOS 的“全屏应用”模式，每个屏变成一个独立空间，screen.width 可能返回 1440（MacBook 自带屏）而不管外接 4K 屏是否正在显示该页面。
- 别依赖
screen.width做布局决策，它反映的是主显示器，不是当前窗口可视区域 - 真正可靠的宽度判断永远是
document.documentElement.clientWidth或matchMedia的实时查询 - 如果用了
viewport但页面仍被缩放，检查是否触发了怪异模式：必须有<!DOCTYPE html>，否则viewport元标签会被忽略
Canvas 高分屏适配在双屏/三屏环境里怎么写才稳
核心就一条：Canvas 渲染质量只取决于你设的缓冲区大小和是否做坐标缩放，跟屏幕数量毫无关系；但多屏常伴随不同 devicePixelRatio（比如笔记本屏是 2x，外接 HDMI 屏是 1x），这就要求初始化时不能硬编码 dpr。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 每次创建 Canvas 前都重新读取：
const dpr = window.devicePixelRatio || 1 - 设置 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)，避免所有坐标手动乘 - 监听
resize和orientationchange，iOS 某些版本旋转后dpr不变但布局重排，必须重置
Linux/macOS 下用 xrandr 或 Display 设置多屏，会影响网页 JS 行为吗
完全不影响。xrandr、系统显示器设置、甚至热插拔显示器，都只改 X11/Wayland 层或 macOS Quartz 显示服务的输出拓扑，浏览器进程看到的仍是标准 DOM 视口和事件流。唯一可能的间接影响，是窗口被拖到高分屏后自动缩放（如 macOS 的“默认”缩放档位），此时 devicePixelRatio 会跳变，但这是浏览器自己响应系统通知的结果，不是 xrandr “导致”的。
立即学习“前端免费学习笔记（深入）”；
- 执行
xrandr --output DP-1 --auto --right-of HDMI-1后，网页 JS 不会收到任何通知 - 如果你监听了
screen.orientation，它也不会变——那是移动端 API，桌面端基本不触发 - 真要响应屏幕变更，只能靠轮询
window.screenX+window.outerWidth，或者监听resize（仅当窗口尺寸实际变化时）
多屏配置本身对 HTML/JS 没有特殊加成，但会让那些本就脆弱的适配逻辑（比如只查 screen.width、忽略 dpr、硬写像素值）立刻暴露出来。最常被忽略的，是以为“页面在显示器A上打开，就一直属于显示器A”——其实窗口可以任意拖动，而 JS 里没有任何钩子能告诉你它刚跨屏了。
