demo · v138

Posture-responsive demo

Simulate four device postures — phone portrait, phone landscape, book-fold, and tent-fold — and see how the article reader layout adapts. The getWindowSegments() values and env(viewport-segment-*) CSS variables that drive each layout update live.

checking support…
Article content main reading area

getWindowSegments() output

segments count1
segment[0].top0
segment[0].left0
segment[0].width320px
segment[0].height568px
segment[1]—
spanningnone

CSS env() variables

/* single-screen */ env(viewport-segment-top 0 0): 0px env(viewport-segment-left 0 0): 0px env(viewport-segment-width 0 0): 320px env(viewport-segment-height 0 0): 568px

the detection code

const segments = window.getWindowSegments?.() ?? [];

if (segments.length === 2) {
  const [left, right] = segments;
  const isBookFold = left.top === right.top;    // side by side
  const isTentFold = left.left === right.left;  // stacked

  if (isBookFold) {
    // Show sidebar in left pane, content in right pane
    layout.setAttribute('data-fold', 'book');
  } else if (isTentFold) {
    // Show content above fold, controls below fold
    layout.setAttribute('data-fold', 'tent');
  }
}

// CSS counterpart:
@media (spanning: single-fold-vertical) {
  .layout { grid-template-columns:
    env(viewport-segment-width 0 0)
    env(viewport-segment-width 1 0); }
}

see also