visualViewport.segmentsAPI JavaScript para dispositivos de tela dupla

Importante

Este artigo descreve funcionalidades e diretrizes que estão em versão prévia pública e podem ser modificadas substancialmente antes de passarem para a disponibilidade geral. A Microsoft não faz nenhuma garantia, expressa ou implícita, com relação às informações fornecidas aqui.

Dica

essa nova versão da API JavaScript de tela dupla está disponível Microsoft Edge Beta no momento em canário, Dev e 96.0.1054.5 insider channels (reversãos ou mais recentes), bem como versões de pré-lançamento do Google Chrome.

Se você estiver usando a liberação estável atual (versão 95) com o sinalizador de recursos da Web experimental , siga a documentação do getWindowSegments (mas lembre-se de que a sintaxe será substituída pelo que está nesta página na próxima versão).

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

Sintaxe

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

Vida útil da API

O valor retornado de window.visualViewport.segments é 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ência ou rotacionau o dispositivo, os segmentos da janela recuperados anteriormente serão inválidos.

Os desenvolvedores podem ouvir o evento de janela resize ou orientationchange detectar se o navegador foi redimensionado 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
});