HTML5无法获取显示器的GPU型号、刷新率、DPI精确值等底层硬件信息，因Web平台出于隐私安全限制仅提供screen对象（主屏逻辑信息）和实验性getScreenDetails()（多屏基础参数，无EDID/厂商/HDR等）。
HTML5 中无法直接通过 ScreenEnumeration 查询多显示器的硬件信息——因为 ScreenEnumeration 并不存在于标准 Web API 中。这是一个常见误解，可能混淆了 screen 对象、window.screen、Navigator.getDisplayMedia() 或实验性 API（如 Window.getScreenDetails()）。
实际可用的多屏信息获取方式
目前浏览器中能安全、跨平台获取多显示器基本信息的唯一标准化途径是 screen 对象和新兴的 getScreenDetails()（需检查支持）：
-
window.screen：仅返回当前窗口所在主屏幕的信息（如width、height、availWidth、colorDepth），无法枚举其他显示器； -
await window.getScreenDetails()（Chrome 120+、Edge 120+）：返回ScreenDetails对象，含screens数组，每个元素描述一个物理屏幕（含width、height、isPrimary、deviceId等），但不提供 GPU 型号、制造商、刷新率、DPI 精确值或 HDMI/DP 接口类型等底层硬件信息； -
getDisplayMedia()：用于捕获屏幕内容，与设备发现无关，不能用于枚举显示器。
getScreenDetails() 的基本用法
需注意该 API 是异步的，且受权限控制（部分浏览器要求在安全上下文 + 用户手势后调用）：
if ('getScreenDetails' in window) {
try {
const details = await window.getScreenDetails();
console.log('检测到', details.screens.length, '个显示器');
details.screens.forEach((screen, i) => {
console.log(`屏幕 ${i + 1}: ${screen.width}×${screen.height}, 主屏: ${screen.isPrimary}`);
});
} catch (err) {
console.warn('获取屏幕详情失败:', err.message);
}
} else {
console.log('当前浏览器不支持 getScreenDetails');
}
为什么无法获取真正意义上的“硬件信息”
出于隐私与安全限制，Web 平台刻意屏蔽了对底层显示硬件的直接访问：
立即学习“前端免费学习笔记（深入）”；
- 浏览器不会暴露显卡型号、EDID 数据、固件版本、接口协议（如 DisplayPort 1.4）；
- 分辨率与缩放值（
devicePixelRatio）是逻辑值，非物理 DPI 测量结果； - 没有 API 可查询刷新率（
refreshRate）、HDR 支持状态、色域（sRGB/P3）、或显示器厂商名称； - 即使
getScreenDetails()提供deviceId，它也是匿名化标识符，不可逆、不唯一跨站点、不对应真实硬件 ID。
替代方案与注意事项
若需更深入的显示环境信息（如开发桌面级 PWA 或内部工具），可考虑：
- 结合
window.matchMedia('(prefers-reduced-motion)')、window.devicePixelRatio和screen.orientation做体验适配； - 使用
resize和orientationchange事件监听布局变化； - 在 Electron、Tauri 或 WebView2 等桌面容器中，通过原生模块（如 Electron 的
screen.getAllDisplays()）获取完整硬件信息——但这已脱离纯 HTML5 范畴； - 避免依赖未标准化或已废弃的提案（如旧版
Screen Capture API扩展或非标准navigator.mozGetUserMedia）。
不复杂但容易忽略：Web 的设计原则是“最小权限”，多显示器信息仅限布局与适配所需，而非硬件探针。真正的硬件指纹被严格限制，这是有意为之的安全边界。
