ScreenDetails

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性: 這是一項實驗性技術
在生產中使用此技術之前,請仔細檢查瀏覽器相容性表格

安全上下文: 此功能僅在安全上下文(HTTPS)中可用,且支援此功能的瀏覽器數量有限。

ScreenDetails 介面是 視窗管理 API 的一部分,它表示使用者裝置上所有可用螢幕的詳細資訊。

可以透過 Window.getScreenDetails() 方法訪問這些資訊。

注意: ScreenDetails 是一個即時物件,這意味著它會隨著可用螢幕的變化而更新。因此,您可以持續查詢同一個物件以獲取更新後的值,而不必反覆呼叫 getScreenDetails()

EventTarget ScreenDetails

例項屬性

繼承其父級 EventTarget 的屬性。

currentScreen 只讀 實驗性

一個單獨的 ScreenDetailed 物件,表示當前瀏覽器視窗所在螢幕的詳細資訊。

screens 只讀 實驗性

一個 ScreenDetailed 物件的陣列,每個物件都表示使用者裝置上可用螢幕的詳細資訊。

注意: screens 僅包含“擴充套件”顯示器,不包含映象顯示器的資訊。

事件

currentscreenchange 實驗性

當視窗的當前螢幕發生變化時觸發——例如可用寬度或高度,或方向。

screenschange 實驗性

當螢幕連線或斷開與系統的連線時觸發。

示例

注意:有關完整的示例,請參閱 多視窗學習環境(也可以檢視 原始碼)。

基本螢幕資訊訪問

呼叫 Window.getScreenDetails() 時,將要求使用者授予管理其所有顯示器上視窗的許可權(可以使用 Permissions.query() 查詢 window-management 來檢查此許可權的狀態)。如果使用者授予了許可權,則返回一個 ScreenDetails 物件。該物件包含使用者系統上所有可用螢幕的詳細資訊。

下面的示例將在每個可用顯示器上開啟一個全尺寸視窗。

js
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 事件來檢測可用螢幕何時發生變化(例如,插入或拔出螢幕時),報告該變化,並更新窗口布局以適應新的配置。

js
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

瀏覽器相容性

另見