Viewport segments

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.

Baseline Status: This feature is currently Limited and is missing in at least one major browser engine.

Desktop Browser Engine Support

Google Chrome

138

Supported

Mozilla Firefox

—

Unsupported

Apple Safari

—

Unsupported

Microsoft Edge

138

Supported

Mobile Browser Engine Support

Chrome Android

138

Firefox Android

—

Safari iOS

—

Specifications and References

Specification ↗ Specification ↗ Specification ↗ Specification ↗ Feature XML ↗

MDN Browser Compat Data Keys:

api.Viewport ↗ api.Viewport.segments ↗ api.Window.viewport ↗ css.at-rules.media.horizontal-viewport-segments ↗ css.at-rules.media.vertical-viewport-segments ↗ css.types.env.viewport-segment-bottom ↗ css.types.env.viewport-segment-height ↗ css.types.env.viewport-segment-left ↗ css.types.env.viewport-segment-right ↗ css.types.env.viewport-segment-top ↗ css.types.env.viewport-segment-width ↗