html5无法枚举外接显示器或设置分辨率，仅能通过window.screen读取主屏只读属性；screen enumeration api不存在，多屏增强需依赖matchmedia、resize事件等间接方案。
HTML5 本身无法直接发现外接显示器或设置分辨率——这是操作系统和浏览器严格限制的底层硬件能力，出于安全与隐私考虑，Screen Enumeration API（即 navigator.mediaDevices.getDisplayMedia() 的配套机制）**并不提供显示器枚举或分辨率控制功能**。目前唯一与多屏相关的标准 API 是 Window.screen 和实验性 Screen API（非 Screen Enumeration），但它们能力有限且有明确边界。
当前可用的屏幕信息：仅限主屏基础属性
通过 window.screen 可读取当前**主显示设备**的只读信息，例如：
-
screen.width/screen.height：屏幕总像素宽高（含任务栏/菜单栏影响，非绝对可靠） -
screen.availWidth/screen.availHeight：可用工作区域尺寸（排除系统UI） -
screen.devicePixelRatio：设备像素比（用于响应式高清适配） -
screen.orientation（需权限）：可监听方向变化，但仅适用于移动/可翻转设备
⚠️ 注意：这些值反映的是运行该网页的窗口所在屏幕，不是“所有连接的显示器”，也无法区分扩展屏或复制模式。
为什么没有真正的“外接显示器枚举”API？
浏览器主动屏蔽了枚举物理显示器的能力，原因包括：
- 隐私风险：显示器数量、分辨率、缩放比例组合可构成强指纹，用于跨站追踪
- 安全沙箱：网页运行在受限环境，无权访问系统显示管理器（如 Windows Display Settings、macOS Mission Control）
- 跨平台不可行：不同操作系统暴露显示器信息的方式差异极大，标准化难度高
截至2024年，W3C 未制定也未推进任何“Screen Enumeration”标准；所谓 “ScreenEnumeration API” 并不存在于规范中，属常见误传。
实际可行的多屏增强方案（有限但实用）
虽不能枚举显示器，但可通过以下方式提升多屏体验：
-
利用
window.matchMedia：监听(width)、(height)、(resolution)等媒体查询变化，间接响应窗口跨屏拖动导致的尺寸突变 -
结合
resize事件 +screen属性：当用户将窗口从主屏拖到副屏时，window.innerWidth和screen.width可能明显变化，可用于动态调整布局 -
全屏 API 配合
screen.orientation.lock()（部分支持）：在允许的场景下锁定方向，避免副屏因旋转触发意外布局错乱 - Native App 补充方案：若需完整多屏控制（如设置副屏为画布输出），必须借助 Electron、Tauri 或 PWA + WebAssembly 调用系统原生 API，网页本身不参与分辨率配置
关于“配置分辨率”：网页完全无权操作
修改显示器分辨率是操作系统级操作，需要管理员权限和图形驱动接口。网页 JavaScript：
- ❌ 无法调用
xrandr（Linux）、Display Configuration API（Windows）、CGConfigureDisplay（macOS） - ❌ 无法触发系统显示设置面板（无对应 API）
- ✅ 唯一相关动作：通过
canvas.style.imageRendering = "pixelated"或 CSSimage-rendering控制缩放质量，优化高DPI屏渲染
任何声称“用 HTML5 设置显示器分辨率”的教程均混淆了概念，实际操作的或是桌面应用，或是误导性伪代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
