demo · v138

Fold-Aware UI

When the browser reports two viewport segments — separated by a hardware fold or hinge — the layout shifts from a single-pane view to a master-detail or top-detail pattern. Simulate the three device postures below and watch the UI adapt.

Checking window.visualViewport.segments…
Device posture:
Single pane
Navigation (left segment)
  • Introduction
  • Features
  • Examples
  • Reference
Detail (right segment)

Introduction

The Viewport Segments API lets you detect when a foldable device splits the screen. When two segments are reported, you can show navigation in one panel and content in the other — no wasted space.

Content (top segment)

Viewport Segments

Top segment shows the main content — ergonomic for reading while the device is propped up. Controls move to the bottom panel for thumb access.

Controls (bottom segment)
segments: 1
layout: single pane
CSS env var: env(viewport-segment-width 0 0) = 100% 
// Read segments from the API
const segments = window.visualViewport?.segments ?? [];
if (segments.length === 2) {
  const [seg0, seg1] = segments;
  const isSideBySide = seg0.top === seg1.top; // book fold
  const isTopBottom  = seg0.left === seg1.left; // tent fold

  if (isSideBySide) {
    layout.classList.add('dual-v'); // master-detail
  } else if (isTopBottom) {
    layout.classList.add('dual-h'); // content-controls
  }
}

// Segments also available as CSS env() variables
.panel {
  width: env(viewport-segment-width 0 0);
  height: env(viewport-segment-height 0 0);
}

see also