demo · v138

visualViewport.segments

The API enumerates the dead-zones a foldable or dual-screen device introduces. Pick a simulated device — see what visualViewport.segments returns, and how a "master-detail" layout reshapes itself around the seam.

checking support…

the code

const vv = window.visualViewport;
if ("segments" in vv) {
  for (const seg of vv.segments) {
    // seg = { x, y, width, height }
    console.log(seg);
  }
}
visualViewport.addEventListener("resize", layout);
// Or listen for the new "segments-change" hint in 138+
visualViewport.addEventListener("segmentschange", layout);

see also