屏幕细节

实验性： 这是一个实验性技术
在生产环境中使用此功能之前，请仔细查看浏览器兼容性表。

安全上下文： 此功能仅在安全上下文 (HTTPS) 中可用，在某些或所有支持的浏览器中可用。

ScreenDetails 是窗口管理 API 的一个接口，表示用户设备上所有可用屏幕的详细信息。

可以通过 Window.getScreenDetails() 方法访问此信息。

注意： ScreenDetails 是一个实时对象，这意味着它会随着可用屏幕的变化而更新。因此，您可以不断查询同一个对象以获取更新的值，而不是重复调用 getScreenDetails()。

实例属性

从其父级 EventTarget 继承属性。

currentScreen 只读实验性: 单个 ScreenDetailed 对象，表示当前浏览器窗口显示在的屏幕的详细信息。
screens 只读实验性: 一个 ScreenDetailed 对象数组，每个对象表示用户设备上可用的一个特定屏幕的详细信息。

注意： screens 仅包含“扩展”显示器，不包括镜像其他显示器的显示器。

事件

currentscreenchange 实验性: 当窗口的当前屏幕以某种方式发生变化时触发 - 例如可用宽度或高度，或方向。
screenschange 实验性: 当屏幕连接或断开系统连接时触发。

示例

注意： 有关完整示例，请参阅多窗口学习环境（另请参阅源代码）。

基本屏幕信息访问

调用 Window.getScreenDetails() 时，系统将询问用户是否允许管理其所有显示器上的窗口（可以使用 Permissions.query() 查询 window-management 来检查此权限的状态）。如果用户授予权限，则返回一个 ScreenDetails 对象。此对象包含用户系统上所有可用屏幕的详细信息。

以下示例在每个可用显示器上打开一个全尺寸窗口。

const screenDetails = await window.getScreenDetails();

// Open a window on each screen of the device
for (const screen of screenDetails.screens) {
  openWindow(
    screen.availLeft,
    screen.availTop,
    screen.availWidth,
    screen.availHeight,
    url,
  );
}

响应可用屏幕的变化

您可以使用 screenschange 事件来检测可用屏幕何时发生变化（例如，当屏幕插拔时），报告变化，并更新窗口排列以适应新的配置。

const screenDetails = await window.getScreenDetails();

// Return the number of screens
let noOfScreens = screenDetails.screens.length;

screenDetails.addEventListener("screenschange", () => {
  // If the new number of screens is different to the old number of screens,
  // report the difference
  if (screenDetails.screens.length !== noOfScreens) {
    console.log(
      `The screen count changed from ${noOfScreens} to ${screenDetails.screens.length}`,
    );

    // Update noOfScreens value
    noOfScreens = screenDetails.screens.length;
  }

  // Open, close, or rearrange windows as needed,
  // to fit the new screen configuration
  updateWindows();
});

规范

规范
窗口管理 # api-screendetails-interface

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅

窗口管理 API