API JavaScript visualViewport.segments pour les appareils à deux écrans

  • Article

La window.visualViewport.segments propriété retourne un tableau contenant les DOMRect s de toutes les zones d’affichage sur lesquelles s’étend la fenêtre du navigateur.

cette API est disponible dans Microsoft Edge version 97 et les versions ultérieures.

Syntaxe

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
 **/

Durée de vie de l’API

La valeur retournée par window.visualViewport.segments est un instantané immuable de l’état de l’appareil au moment où la méthode a été appelée, si l’utilisateur a modifié l’état d’étendue ou a fait pivoter l’appareil, les segments de fenêtre récupérés précédemment ne sont pas valides.

Les développeurs peuvent écouter l’événement de fenêtre resize ou orientationchange détecter si le navigateur a été redimensionné ou s’il a subi une rotation.

Exemple

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