Technical review: Device Posture API

[chrisdavidmills]

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.

Also see mdn/dom-examples#292 for my PR to add a demo to the dom-examples repo

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 (8)

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

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

• macros:
  • Can't resolve /en-US/docs/Web/API/Navigator/standalone

---

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

• broken_links:
  • Can't resolve /en-US/docs/Web/CSS/media-query-list
  • Can't resolve /en-US/docs/Web/CSS/rule-list

---

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

• macros:
  • Can't resolve /en-US/docs/Web/CSS/@media/environment-blending
  • Can't resolve /en-US/docs/Web/CSS/@media/horizontal-viewport-segments
  • Can't resolve /en-US/docs/Web/CSS/@media/nav-controls
  • Can't resolve /en-US/docs/Web/CSS/@media/vertical-viewport-segments
  • Can't resolve /en-US/docs/Web/CSS/@media/video-color-gamut

External URLs (6)

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 👀)
• https://mdn.github.io/dom-examples/device-posture-api/ (1 time) (Note! This may be a new URL 👀)

---

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

• https://mdn.github.io/dom-examples/device-posture-api/ (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2025-01-31 10:47:52)