demo · v138

Dual-pane email layout

The list-detail pattern foldables were designed for. On a flat phone you swipe between list and message. On a fold, the hinge becomes the divider: list on the left segment, message on the right. The same JS, different layout, driven by the segments enumeration.

checking visualViewport.segments support…
simulate device:

flat phone, 1 segment

awaiting…

the API

const segments = window.visualViewport?.segments;  // 138+
if (!segments || segments.length === 1) {
  // flat phone — stack/swipe layout
  layout("stacked");
} else {
  // foldable — render list in segments[0], detail in segments[1]
  layout("dual", {
    listRect: segments[0],
    detailRect: segments[1],
    hingeOrientation: segments[0].height === segments[1].height ? "vertical" : "horizontal",
  });
}
window.visualViewport.addEventListener("segmentschange", relayout);

Before this, sites either guessed (CSS media query for screen width > 1200px), or scraped the legacy CSS environment variables that only some surfaces exposed. The enumeration API hands you the real geometry: how many segments, where the hinge is, what the orientation is.

see also