デュアルスクリーン デバイス用 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から返される値は、メソッドが呼び出された時点のデバイス状態の変更できないスナップショットです。ユーザーがスパン状態を変更した場合、またはデバイスをローテーションした場合、以前に取得したウィンドウ セグメントは無効になります。

開発者は、ウィンドウ イベントをリッスンしたりresizeorientationchange、ブラウザーのサイズが変更されたのか、デバイスが回転したのかを検出することができます。

例

/**
 * 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
});