Riff
Developers

Viewport segments

Keeps the turntable and the controls out of a folding phone's crease.

Now Playing on a wide screen: the Song and Video switch at the top, the cover on the left, the Up next list on the right, and the player bar along the bottom
The turntable, which keeps to one page of a half-open phone.

How Riff uses it

Where the browser reports a fold, the horizontal-viewport-segments and vertical-viewport-segments media queries say whether it runs down the screen or across it, and the viewport-segment-width, viewport-segment-height and edge variables give each segment's size. Folded like a book, Now Playing's grid takes its two columns from the two segments, the deck on the left page and the controls on the right, with the crease as the gap between them; stood like a tent, it takes two rows, the sleeve and the turntable above and the controls below.

Why

An iPhone Duo can be half open, and anything centred on the whole screen lands in the fold. The browser knows where the fold is; the layout follows it rather than guessing from the screen's size.

Without it

Without it, as in Safari until its flag is on, the unfolded layout holds: the screen is one turntable, crease and all.

Where

Links open the source at the commit this page was published from.

Specification: CSS Environment Variables Module Level 1. Reference: Viewport segments on MDN.