JavaScript visualViewport.segments API for dual-screen devices

  • Article

The window.visualViewport.segments property returns an array containing the DOMRects of all the display-regions the browser window is spanning across.

This API is available in Microsoft Edge version 97 and newer.

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

API Lifetime

The value returned from window.visualViewport.segments is an immutable snapshot of the device state at the time the method was called, if the user changed the spanning state, or rotated the device, the window segments previously retrieved will be invalid.

Developers may listen to the window resize event or orientationchange to detect whether the browser was resized or the device was rotated.

Example

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