coderef

Viewport segmentsLimited availability

The viewport segment CSS environment variables and media features, and the viewport.segments API, allow you to adapt your layout to devices where the display is split, such as on foldable devices.

Not yet supported in all major browsers — check the table and provide a fallback.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–137Not supported
138+Supportedsince Jun 24, 2025
Current: 155
Edge
12–137Not supported
138+Supportedsince Jun 26, 2025
Current: 154
Firefox
✕Not supportedup to 157
Current: 157
Safari
✕Not supportedup to 27
Current: 27
MobileChrome Android
18–137Not supported
138+Supportedsince Jun 24, 2025
Current: 155
Firefox Android
✕Not supportedup to 157
Current: 157
Safari iOS
✕Not supportedup to 27
Current: 27

How to use

Not supported in Firefox, Safari, Firefox Android, Safari iOS. Use feature detection below and provide a fallback (or a polyfill) for those browsers.

Example

Full syntax and examples are on MDN: Viewport.

Feature detection

JS · check before using
if ("Viewport" in globalThis && "segments" in Viewport.prototype) {
  // Viewport.segments is available
}

Documentation (MDN)

Specification

Sub-features

Support for each part of the feature (11). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
Viewport138138✕✕138✕✕
Viewport.segments138138✕✕138✕✕
Window.viewport138138✕✕138✕✕
@media.horizontal-viewport-segments138138✕✕138✕✕
@media.vertical-viewport-segments138138✕✕138✕✕
<env>.viewport-segment-bottom138138✕✕138✕✕
<env>.viewport-segment-height138138✕✕138✕✕
<env>.viewport-segment-left138138✕✕138✕✕
<env>.viewport-segment-right138138✕✕138✕✕
<env>.viewport-segment-top138138✕✕138✕✕
<env>.viewport-segment-width138138✕✕138✕✕