如何在HTML5中利用ScreenEnumeration查询多显示器环境的硬件信息-H5教程-PHP中文网

html5无法获取显示器的gpu型号、刷新率、dpi精确值等底层硬件信息，因web平台出于隐私安全限制仅提供screen对象（主屏逻辑信息）和实验性getscreendetails()（多屏基础参数，无edid/厂商/hdr等）。

如何在html5中利用screenenumeration查询多显示器环境的硬件信息

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 是异步的，且受权限控制（部分浏览器要求在安全上下文 + 用户手势后调用）：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

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）。