Compartilhar via

API javaScript visualViewport.segments para dispositivos de tela dupla

  • Artigo

A window.visualViewport.segments propriedade retorna uma matriz que contém os DOMRects de todas as regiões de exibição que a janela do navegador está abrangendo.

Essa API está disponível no Microsoft Edge versão 97 e mais recente.

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

Tempo de vida da API

window.visualViewport.segments O valor retornado de é um instantâneo imutável do estado do dispositivo no momento em que o método foi chamado, se o usuário alterou o estado de abrangção ou girou o dispositivo, os segmentos de janela recuperados anteriormente serão inválidos.

Os desenvolvedores podem escutar o evento da resize janela orientationchange ou detectar se o navegador foi reessado ou se o dispositivo foi girado.

Exemplo

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