Device Posture API

[chrisdavidmills]

NOTE: Keeping this as a draft until I've had my code example checked, made it available on dom-examples, and linked to it from the docs.

Description

Chrome 132 supports the Device Posture API, which provides functionality to create user interfaces that adapt to a foldable device's posture and respond to posture changes.

Specifically, it adds:

• The DevicePosture interface, which is accessed via the navigator.devicePosture property.
• The device-posture media query feature.

This PR adds docs for all the features of the API.

See https://chromestatus.com/feature/5185813744975872 for the data source.

Also see https://developer.chrome.com/blog/foldable-apis-ot for a tutorial with some info.

Motivation

Additional details

Related issues and pull requests

[github-actions]

Preview URLs (10 pages)

• /en-US/docs/Web/API/DevicePosture/change_event
• /en-US/docs/Web/API/DevicePosture/type
• /en-US/docs/Web/API/DevicePosture
• /en-US/docs/Web/API/Device_Posture_API
• /en-US/docs/Web/API/Navigator/devicePosture
• /en-US/docs/Web/API/Navigator
• /en-US/docs/Web/CSS/@media/device-posture
• /en-US/docs/Web/CSS/@media
• /en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
• /en-US/docs/Web/CSS/CSS_media_queries

Flaws (198)

Note! 5 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/API/Navigator
Title: Navigator
Flaw count: 1

• macros:
  • /en-US/docs/Web/API/Navigator/standalone does not exist

---

URL: /en-US/docs/Web/CSS/@media
Title: @media
Flaw count: 48

• macros:
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS/First_steps
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS/First_steps/What_is_CSS
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS/First_steps/Getting_started
  • and 43 more flaws omitted

---

URL: /en-US/docs/Web/CSS/@media/device-posture
Title: device-posture
Flaw count: 48

• macros:
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS/First_steps
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS/First_steps/What_is_CSS
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS/First_steps/Getting_started
  • and 43 more flaws omitted

---

URL: /en-US/docs/Web/CSS/CSS_media_queries
Title: CSS media queries
Flaw count: 53

• macros:
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS/First_steps
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS/First_steps/What_is_CSS
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS/First_steps/Getting_started
  • and 48 more flaws omitted

---

URL: /en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
Title: Using media queries
Flaw count: 48

• macros:
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS/First_steps
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS/First_steps/What_is_CSS
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS/First_steps/Getting_started
  • and 43 more flaws omitted

External URLs (4)

URL: /en-US/docs/Web/API/DevicePosture
Title: DevicePosture

• https://developer.chrome.com/blog/foldable-apis-ot (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/DevicePosture/type
Title: DevicePosture: type property

• https://developer.chrome.com/blog/foldable-apis-ot (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/DevicePosture/change_event
Title: DevicePosture: change event

• https://developer.chrome.com/blog/foldable-apis-ot (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/Device_Posture_API
Title: Device Posture API

• https://developer.chrome.com/blog/foldable-apis-ot (1 time) (Note! This may be a new URL 👀)