FLAT / SPANNED DUAL viewport-segments: 2
9:41
5G 100%
Screen 2
⚡ AI Active 
/* W3C CSS Viewport Segments Level 1 */
@media (horizontal-viewport-segments: 2) {
  .app-container {
    display: grid;
    grid-template-columns: 
      env(viewport-segment-width 0 0) 
      env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)
      env(viewport-segment-width 1 0);
  }
  .master-pane {
    grid-column: 1;
    overflow-y: auto;
  }
  .detail-pane {
    grid-column: 3;
  }
}
Ready. Adjust the hinge slider or select an archetype to inspect responsive layout adaptation.
CSS Hinge: 180°

Dual-Screen & Foldable UI Engineering Principles

How modern mobile operating systems solve multi-posture ergonomics without app restarts or layout jumping.

1. Posture-Driven State Continuity

When folding from flat (180°) into tabletop (90°), content must not reload. In companion mode, media viewports automatically anchor to the top screen while controls, scrubbers, and comments cascade down to the base screen.

2. The Hinge Mask / Dead Zone

Unlike standard responsive web queries, dual-screen hardware features a physical dead-band (such as the 14mm chassis seam on the Surface Duo or the bezel on multi-chassis concepts). Text or face detection boxes must never span across the seam.

3. W3C Viewport Segments API

The standard CSS media query @media (horizontal-viewport-segments: 2) allows layout engines to read exact segment boundaries using CSS environment variables env(viewport-segment-width).

Enjoy this tool? Build your own with Super