The segments property allows developers to target dual screens and foldable devices by giving information about the segments (or zones) when the browser window is spanned across the screen(s). There is a good set of pictures to demonstrate what we are trying to achieve here.
Work was started by Microsoft in WICG to bring a JavaScript API, link here. The proposed specification adds a segments property to the visualViewport object. segments are only defined when the browser window is maximized. They are also defined in CSS pixels. When the browser window state changes (maximized/resized) one needs to listen for the resize events to query the updated segments.
Please note that the segments property is intended mostly to mirror in JavaScript what’s being available in CSS (see MQs).
Both APIs, CSS and JavaScript went through TAG reviews here and here.
In terms of implementation status, Android and Windows are supported in Chromium based browser (with some caveats). Microsoft Edge does ship the CSS and the JavaScript APIs enabled by default on all platforms. Samsung Internet also is shipping both APIs by default on Android (the only OS they target).
The
segmentsproperty allows developers to target dual screens and foldable devices by giving information about the segments (or zones) when the browser window is spanned across the screen(s). There is a good set of pictures to demonstrate what we are trying to achieve here.Work was started by Microsoft in WICG to bring a JavaScript API, link here. The proposed specification adds a
segmentsproperty to thevisualViewportobject.segmentsare only defined when the browser window is maximized. They are also defined in CSS pixels. When the browser window state changes (maximized/resized) one needs to listen for theresizeevents to query the updatedsegments.Please note that the
segmentsproperty is intended mostly to mirror in JavaScript what’s being available in CSS (see MQs).Both APIs, CSS and JavaScript went through TAG reviews here and here.
In terms of implementation status, Android and Windows are supported in Chromium based browser (with some caveats). Microsoft Edge does ship the CSS and the JavaScript APIs enabled by default on all platforms. Samsung Internet also is shipping both APIs by default on Android (the only OS they target).