JavaScript visualViewport.segments API untuk perangkat layar ganda

  • Artikel

Properti window.visualViewport.segments mengembalikan array yang berisi DOMRectdari semua wilayah tampilan yang mencakup jendela browser.

API ini tersedia di Microsoft Edge versi 97 dan yang lebih baru.

Sintaks

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

Masa Pakai API

Nilai yang dikembalikan dari window.visualViewport.segments adalah rekam jepret yang tidak dapat diubah dari status perangkat pada saat metode dipanggil, jika pengguna mengubah status rentang, atau memutar perangkat, segmen jendela yang sebelumnya diambil akan tidak valid.

Pengembang dapat mendengarkan peristiwa jendela resize atau orientationchange mendeteksi apakah browser diubah ukurannya atau perangkat diputar.

Contoh

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