Viewport: segments property
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The segments read-only property of the Viewport interface returns an array of DOMRect objects representing the position and dimensions of each viewport segment within the overall display.
Value
An array of DOMRect objects.
Examples
Basic Viewport.segments usage
This snippet will loop through each segment in the viewport, and log a string to the console detailing the index number, width, and height.
js
const segments = window.viewport.segments;
segments.forEach((segment) =>
console.log(
`Segment ${segments.indexOf(segment)} is ${segment.width}px x ${segment.height}px`,
),
);
Specifications
| Specification |
|---|
| CSS Viewport Module Level 1 # dom-viewport-segments |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
segments
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
See also
- Viewport Segments API
- CSSOM view API
- Origin trial for Foldable APIs via developer.chrome.com (2024)