Device Posture API (foldables)

The navigator.devicePosture property exposes a DevicePosture object for reading the applied posture and receiving posture changes. The specification defines "continuous" and "folded" values.

Where it is supported

BCD records the API from Chrome 132 and Samsung Internet 16.2, with Chromium-derived entries mirrored from Chrome. It records no support in Firefox or desktop Safari; Safari on iOS 27 records support behind the DevicePostureEnabled preference.

Syntax

const posture = navigator.devicePosture.type;
navigator.devicePosture.addEventListener('change', handlePostureChange);

The specification exposes navigator.devicePosture to Window in secure contexts.

Members

Member	Type	Meaning
type	DevicePostureType	Returns the document’s current applied posture as "continuous" or "folded".
change	event	Fires on the DevicePosture object after the applied posture changes.

The DevicePosture interface inherits from EventTarget. The devicePosture property returns the same object on repeated access, as specified by [SameObject].

Exceptions

None.

Warning

The device-posture change steps stop while the document is hidden. The specification says the document receives the change event after it becomes visible again; reading the value while hidden can therefore return a stale posture (Device Posture change).

Examples

These examples preserve a single-pane layout when posture information is unavailable or does not report a fold.

Switching between folded and single-pane layouts

This example detects the API, applies the current posture, and uses a single-pane class when the API is unavailable.

function applyPosture(type) {
  document.documentElement.classList.toggle('is-folded', type === 'folded');
  document.documentElement.classList.toggle('is-single-pane', type !== 'folded');
}

if ('devicePosture' in navigator) {
  applyPosture(navigator.devicePosture.type);
  navigator.devicePosture.addEventListener('change', () => {
    applyPosture(navigator.devicePosture.type);
  });
} else {
  applyPosture('continuous');
}

The fallback selects the same single-pane layout used for the specified "continuous" value. It does not infer whether the physical device can fold.

Adapting with a media query

The specification also defines the device-posture media feature. This rule changes the layout only when the user agent reports folded.

.workspace {
  display: block;
}

@media (device-posture: folded) {
  .workspace {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

When the media feature is unsupported or does not match, the block layout remains in effect.

See also

• Screen Orientation API
• orientation manifest member
• Device Posture API specification (W3C)
• DevicePosture (MDN)

Specifications

Specification	Status
DevicePosture interface	W3C draft