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

Важно!

В этой статье описаны функциональные возможности общедоступной ознакомительной версии, а также инструкции по ее использованию. Сведения могут быть существенно изменены, прежде чем версия станет общедоступной. Майкрософт не дает никаких гарантий, явных или подразумеваемых, в отношении предоставленной здесь информации.

Совет

эта новая версия API-интерфейса на основе двойного экрана в настоящее время доступна в каналах предварительной оценки Microsoft Edge Beta, Dev и ранний (96.0.1054.5 или более поздней версии), а также в предварительных версиях Google Chrome.

Если вы используете текущий стабильный выпуск (версия 95) с флагом экспериментальных веб-функций , следуйте документации по жетвиндовсегментс (но помните, что синтаксис будет заменен на эту страницу в следующей версии).

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

Синтаксис

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