通过

适用于双屏设备的 JavaScript visualViewport.segments API

  • 项目

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