The Viewport Segments API allows developers to adapt their website/webapp layout to target foldable devices. The viewport segments defines the position and dimensions of a logically separate region of the viewport. Viewport segments are created when the viewport is split by one or more hardware features (such as a fold or a hinge between separate displays) that act as a divider; segments are the regions of the viewport that can be treated as logically distinct by the author.
As this time this API applies only to Android and Windows OSes. Android provides the necessary OS APIs over here. Windows doesn't have an official API yet but instead relies on OEMs implementing the following specification in their middleware pre-installed software.
This API is to complimentary of the Device Posture API which also helps targeting foldable devices.
This API is enabled by default on Samsung Internet.
This API is enabled by default on some Microsoft Edge platforms.
WebKittens
No response
Title of the spec
CSS Viewport Segments
URL to the spec
https://drafts.csswg.org/css-env-1 https://www.w3.org/TR/mediaqueries-5/#mf-horizontal-viewport-segments
URL to the spec's repository
No response
Issue Tracker URL
No response
Explainer URL
https://github.com/WICG/visual-viewport/blob/gh-pages/segments-explainer/SEGMENTS-EXPLAINER.md
TAG Design Review URL
https://github.com/w3ctag/design-reviews/issues/689
Mozilla standards-positions issue URL
https://github.com/mozilla/standards-positions/issues/883
WebKit Bugzilla URL
No response
Radar URL
No response
Description
Specification or proposal URLs:
CSS : https://drafts.csswg.org/css-env-1/#viewport-segments and https://www.w3.org/TR/mediaqueries-5/#mf-horizontal-viewport-segments
JavaScript : https://wicg.github.io/visual-viewport/#dom-visualviewport-segments (Proposal to merge it into VisualViewport https://github.com/w3c/csswg-drafts/pull/9285)
The Viewport Segments API allows developers to adapt their website/webapp layout to target foldable devices. The viewport segments defines the position and dimensions of a logically separate region of the viewport. Viewport segments are created when the viewport is split by one or more hardware features (such as a fold or a hinge between separate displays) that act as a divider; segments are the regions of the viewport that can be treated as logically distinct by the author.
As this time this API applies only to Android and Windows OSes. Android provides the necessary OS APIs over here. Windows doesn't have an official API yet but instead relies on OEMs implementing the following specification in their middleware pre-installed software.
This API is to complimentary of the Device Posture API which also helps targeting foldable devices.
This API is enabled by default on Samsung Internet. This API is enabled by default on some Microsoft Edge platforms.
TAG review https://github.com/w3ctag/design-reviews/issues/689 and https://github.com/w3ctag/design-reviews/issues/690.