visualViewport.segmentsAPI JavaScript pour les appareils à deux écrans

Important

Les fonctionnalités et l’aide décrites dans cet article sont en préversion publique et peuvent faire l’objet de modifications importantes avant leur lancement en disponibilité générale. Microsoft ne donne aucune garantie, expresse ou implicite, concernant les informations fournies ici.

Conseil

cette nouvelle version de l’API JavaScript à deux écrans est actuellement disponible dans Microsoft Edge Beta, Dev et les canaux d’initiés des canaries (96.0.1054.5 ou versions ultérieures), ainsi que les versions préliminaires de Google Chrome.

Si vous utilisez la version stable actuelle (version 95) avec l’indicateur de fonctionnalités Web expérimentales , suivez la documentation de getWindowSegments (mais sachez que la syntaxe sera remplacée par ce qui se trouve dans cette page dans la prochaine version).

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.

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