適用于雙螢幕裝置的 JavaScript visualViewport.segments API

  • 發行項

window.visualViewport.segments屬性會傳回陣列，其中包含 DOMRect 瀏覽器視窗跨越的所有顯示區域。

此 API 可在 Microsoft Edge 97 版和更新版本中使用。

語法

let screens = window.visualViewport.segments;

console.log(screens.length);

/**
 * Output:
 * Surface Duo with browser spanning: 2
 * Surface Duo with browser and another app side-by-side: 1
 * Desktops, Macs, Etc: 1
 **/

API 存留期

從 window.visualViewport.segments 傳回的值是在呼叫方法時，裝置狀態的不可變快照集; 如果使用者變更跨越狀態或旋轉裝置，則先前抓取的視窗區段將會無效。

開發人員可能會接聽視窗 resize 事件，或 orientationchange 偵測瀏覽器是否已調整大小或裝置已旋轉。

範例

/**
 * Browser state: spanning on Surface Duo device
 **/
let screens = window.visualViewport.segments;

console.log(screens.length); // prints 2

/**
 * Some time later.. user resizes the browser
 *
 * Browser state: residing on 1 display
 **/

window.addEventListener('resize', () =>{
   screens = window.visualViewport.segments;
   console.log(screens.length); // prints 1
});