# Device Posture API (foldables)

> How navigator.devicePosture exposes continuous and folded posture states, reports changes, and falls back to a single-pane layout when unavailable.

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

```js
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.

:::caution
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](https://w3c.github.io/device-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.

```js
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`.

```css
.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](/reference/capabilities/screen-orientation-api/)
- [orientation manifest member](/reference/manifest/orientation/)
- [Device Posture API specification (W3C)](https://w3c.github.io/device-posture/)
- [DevicePosture (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/DevicePosture)