GeezerVison is showing developer.mozilla.org — Viewport Segments API - Web APIs | MDN
Viewport Segments API
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Want more browser support for this feature? Tell us why.
The Viewport Segments API allows developers to access the position and dimensions of logically separate viewport segments using CSS and JavaScript. 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. With the Viewport Segments API, developers can create responsive designs optimized for different viewport segment sizes and arrangements.
Devices with multiple displays that are intended to act as different segments of the same display surface (think foldable or hinged screen smartphones) present some unique design challenges to developers. You can optimize your layout for the display as a single entity, but how can you ensure that design elements fit snugly on the different segments and are not cut into two pieces? And how can you prevent content from being hidden by the physical fold/join?
It may be important to know whether a user's device screen has a fold or join, what size the different segments are, whether they are the same size, and the orientation of the segments (whether they are side-by-side or top-to-bottom). The Viewport Segments API enables accessing the user's segmented device information with CSS and JavaScript features that provide access to the position and dimensions of each viewport segment within a display, including @media features to detect different horizontal and vertical region layouts.
For an explanation of how the API works, see Using the Viewport Segments API.
Viewport-
Represents the device's viewport. Provides access to the Viewport.segments property, which returns an array of DOMRect objects representing the position and dimensions of each viewport segment within a segmented display.
Window.viewport-
Returns a Viewport object instance, which provides information about the current state of the device's viewport.
You can find a complete example demonstrating usage of the above features in the Viewport segment API demo.
If possible, you should view the demo on a foldable device. Current browser developer tools enable emulating foldable devices, but don't include emulation of the different physical segments.