API de JavaScript visualViewport.segments para dispositivos de doble pantalla

  • Artículo

La window.visualViewport.segments propiedad devuelve una matriz que contiene las DOMRectde todas las regiones para mostrar que abarca la ventana del explorador.

Esta API está disponible en Microsoft Edge versión 97 y posteriores.

Sintaxis

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

Duración de la API

window.visualViewport.segments El valor devuelto por es una instantánea inmutable del estado del dispositivo en el momento en que se llamó al método; si el usuario cambió el estado de expansión o rotó el dispositivo, los segmentos de ventana recuperados previamente no serán válidos.

Los desarrolladores pueden escuchar el evento de resize ventana o orientationchange detectar si se ha cambiado el tamaño del explorador o si se ha girado el dispositivo.

Ejemplo

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