Share via

이중 화면 디바이스용 JavaScript visualViewport.segments API

  • 아티클

이 속성은 window.visualViewport.segments 브라우저 창에 DOMRect걸쳐 있는 모든 표시 영역의 s를 포함하는 배열을 반환합니다.

이 API는 Microsoft Edge 버전 97 이상에서 사용할 수 있습니다.

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 수명

반환된 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
});