JavaScript-API visualViewport.segments für Dual-Screen-Geräte

  • Artikel

Die window.visualViewport.segments -Eigenschaft gibt ein Array zurück, DOMRectdas die s aller Anzeigeregionen enthält, über die sich das Browserfenster erstreckt.

Diese API ist ab version Microsoft Edge 97 verfügbar.

Syntax

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-Lebensdauer

window.visualViewport.segments Der von zurückgegebene Wert ist eine unveränderliche Momentaufnahme des Gerätestatus zum Zeitpunkt des Aufrufens der Methode. Wenn der Benutzer den Übergreifenden Zustand geändert oder das Gerät gedreht hat, sind die zuvor abgerufenen Fenstersegmente ungültig.

Entwickler können auf das Fensterereignis resizeorientationchange lauschen oder erkennen, ob die Größe des Browsers geändert oder das Gerät gedreht wurde.

Beispiel

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