Поделиться через

API JavaScript visualViewport.segments для устройств с двумя экранами

  • Статья

window.visualViewport.segmentsСвойство возвращает массив, DOMRect содержащий все области, которые отображаются в окне браузера.

этот API доступен в Microsoft Edge версии 97 и более поздних.

Синтаксис

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

Время существования API

Значение, возвращаемое из window.visualViewport.segments , является неизменяемым моментальным снимком состояния устройства во время вызова метода, если пользователь изменил состояние объединения или повернул устройство, ранее полученные сегменты окна будут недействительны.

Разработчики могут прослушивать событие окна resize или orientationchange определить, был ли изменен размер браузера, или же устройство было повернуто.

Пример

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