Condividi tramite

API JavaScript visualViewport.segments per dispositivi a doppio schermo

  • Articolo

La window.visualViewport.segments proprietà restituisce una matrice contenente le DOMRects di tutte le aree di visualizzazione su cui si estende la finestra del browser.

Questa API è disponibile in Microsoft Edge versione 97 e successiva.

Sintassi

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

Durata DELL'API

window.visualViewport.segments Il valore restituito da è uno snapshot non modificabile dello stato del dispositivo al momento della chiamata al metodo . Se l'utente ha modificato lo stato di spanning o ha ruotato il dispositivo, i segmenti della finestra recuperati in precedenza non saranno validi.

Gli sviluppatori possono restare in ascolto dell'evento resize della orientationchange finestra o rilevare se il browser è stato ridimensionato o se il dispositivo è stato ruotato.

Esempio

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