Skip to content

Commit 7860297

Browse files
chrisdavidmillsestellegithub-actions[bot]
authored
Editorial review: Add docs for the viewport segments api (mdn#40528)
* Add docs for the viewport segments api * rename wrongly-named directory * Fixes for darktears review comments * A couple of further language tweaks * Update files/en-us/web/api/viewport/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Update files/en-us/web/css/env/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Update files/en-us/web/css/@media/vertical-viewport-segments/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Update files/en-us/web/css/@media/vertical-viewport-segments/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Update files/en-us/web/css/@media/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Update files/en-us/web/css/env/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/env/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Fixes for estelle review comments * Update files/en-us/web/css/env/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Fixes for estelle review comments * Fixes for estelle review comments * Update files/en-us/web/css/env/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Update files/en-us/web/css/env/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Update files/en-us/web/css/css_environment_variables/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Update files/en-us/web/css/css_environment_variables/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Fixes for estelle review comments * Small wording upddate * remote edits to PR * groupdata capitalization * Remove incorrect inheritance claim * Edit grammar * grammar fixes, fill in missing URLs * Update files/en-us/web/api/viewport_segments_api/using/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> --------- Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Estelle Weyl <estelle@weyl.org>
1 parent 2d5e220 commit 7860297

File tree

16 files changed

+797
-74
lines changed

16 files changed

+797
-74
lines changed

‎files/en-us/web/api/viewport/index.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: Viewport
3+
slug: Web/API/Viewport
4+
page-type: web-api-interface
5+
status:
6+
- experimental
7+
browser-compat: api.Viewport
8+
---
9+
10+
{{APIRef("Viewport Segments API")}}{{SeeCompatTable}}
11+
12+
The **`Viewport`** interface of the {{domxref("Viewport Segments API", "Viewport Segments API", "", "nocode")}} represents the device's {{glossary("viewport")}}.
13+
14+
{{InheritanceDiagram}}
15+
16+
## Instance properties
17+
18+
- {{domxref("Viewport.segments", "segments")}} {{ReadOnlyInline}} {{Experimental_Inline}}
19+
- : Returns an array of {{domxref("DOMRect")}} objects representing the position and dimensions of each viewport segment within the overall display.
20+
21+
## Specifications
22+
23+
{{Specifications}}
24+
25+
## Browser compatibility
26+
27+
{{Compat}}
28+
29+
## See also
30+
31+
- [Using the Viewport Segments API](/en-US/docs/Web/API/Viewport_segments_API/Using)
32+
- [Viewport Segments API](/en-US/docs/Web/API/Viewport_segments_API)
33+
- [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API)
34+
- [Device Posture API](/en-US/docs/Web/API/Device_Posture_API)
35+
- [Origin trial for Foldable APIs](https://developer.chrome.com/blog/foldable-apis-ot) via developer.chrome.com (2024)

‎files/en-us/web/api/viewport/segments/index.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
title: "Viewport: segments property"
3+
short-title: segments
4+
slug: Web/API/Viewport/segments
5+
page-type: web-api-instance-property
6+
status:
7+
- experimental
8+
browser-compat: api.Viewport.segments
9+
---
10+
11+
{{APIRef("Viewport Segments API")}}{{SeeCompatTable}}
12+
13+
The **`segments`** read-only property of the {{domxref("Viewport")}} interface returns an array of {{domxref("DOMRect")}} objects representing the position and dimensions of each viewport segment within the overall display.
14+
15+
## Value
16+
17+
An array of {{domxref("DOMRect")}} objects.
18+
19+
## Examples
20+
21+
### Basic `Viewport.segments` usage
22+
23+
This snippet will loop through each segment in the viewport, and log a string to the console detailing the index number, width, and height.
24+
25+
```js
26+
const segments = window.viewport.segments;
27+
28+
segments.forEach((segment) =>
29+
console.log(
30+
`Segment ${segments.indexOf(segment)} is ${segment.width}px x ${segment.height}px`,
31+
),
32+
);
33+
```
34+
35+
## Specifications
36+
37+
{{Specifications}}
38+
39+
## Browser compatibility
40+
41+
{{Compat}}
42+
43+
## See also
44+
45+
- [Viewport Segments API](/en-US/docs/Web/API/Viewport_segments_API)
46+
- [Visual viewport API](/en-US/docs/Web/API/Visual_Viewport_API)
47+
- [Origin trial for Foldable APIs](https://developer.chrome.com/blog/foldable-apis-ot) via developer.chrome.com (2024)

‎files/en-us/web/api/viewport_segments_api/index.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
title: Viewport Segments API
3+
slug: Web/API/Viewport_segments_API
4+
page-type: web-api-overview
5+
status:
6+
- experimental
7+
browser-compat: api.Viewport.segments
8+
---
9+
10+
{{DefaultAPISidebar("Viewport segments API")}}{{seecompattable}}
11+
12+
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.
13+
14+
## Concepts and usage
15+
16+
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?
17+
18+
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 {{cssxref("@media")}} features to detect different horizontal and vertical region layouts.
19+
20+
For an explanation of how the API works, see [Using the Viewport Segments API](/en-US/docs/Web/API/Viewport_segments_API/Using).
21+
22+
## Interfaces
23+
24+
- {{domxref("Viewport")}}
25+
- : Represents the device's viewport. Provides access to the {{domxref("Viewport.segments")}} property, which returns an array of {{domxref("DOMRect")}} objects representing the position and dimensions of each viewport segment within a segmented display.
26+
27+
### Extensions to other interfaces
28+
29+
- {{domxref("Window.viewport")}}
30+
- : Returns a `Viewport` object instance, which provides information about the current state of the device's viewport.
31+
32+
## CSS features
33+
34+
- {{cssxref("@media/horizontal-viewport-segments", "horizontal-viewport-segments")}} `@media` feature
35+
- : Detects whether the device has a specified number of viewport segments laid out horizontally.
36+
- {{cssxref("@media/vertical-viewport-segments", "vertical-viewport-segments")}} `@media` feature
37+
- : Detects whether the device has a specified number of viewport segments laid out vertically.
38+
- [Viewport segment environment variables](/en-US/docs/Web/CSS/env#viewport-segment-width)
39+
- : These [environment variables](/en-US/docs/Web/CSS/CSS_environment_variables/Using_environment_variables) provide access to the edge coordinates and dimensions of each viewport segment.
40+
41+
## Examples
42+
43+
You can find a complete example demonstrating usage of the above features in the [Viewport segment API demo](https://mdn.github.io/dom-examples/viewport-segment-api/).
44+
45+
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.
46+
47+
## Specifications
48+
49+
{{Specifications}}
50+
51+
## Browser compatibility
52+
53+
{{Compat}}
54+
55+
## See also
56+
57+
- [Using the Viewport Segments API](/en-US/docs/Web/API/Viewport_segments_API/Using)
58+
- [Viewport API](/en-US/docs/Web/API/Viewport_API)
59+
- [Device Posture API](/en-US/docs/Web/API/Device_Posture_API)
60+
- [CSS environment variables](/en-US/docs/Web/CSS/CSS_environment_variables) module
61+
- [Origin trial for Foldable APIs](https://developer.chrome.com/blog/foldable-apis-ot) via developer.chrome.com (2024)

‎files/en-us/web/api/viewport_segments_api/using/env-var-indices.png‎

12.3 KB
Loading

0 commit comments

Comments
 (0)