ScreenDetails
ScreenDetails 介面是 視窗管理 API 的一部分,它表示使用者裝置上所有可用螢幕的詳細資訊。
可以透過 Window.getScreenDetails() 方法訪問這些資訊。
注意: ScreenDetails 是一個即時物件,這意味著它會隨著可用螢幕的變化而更新。因此,您可以持續查詢同一個物件以獲取更新後的值,而不必反覆呼叫 getScreenDetails()。
例項屬性
繼承其父級 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 |
瀏覽器相容性
載入中…