JavaScript Navigator devicePosture Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word DEVICEPOSTURE

Definition

navigator.devicePosture is a read-only property that returns a DevicePosture object (MDN). Use it to read whether the screen is flat or folded, and to react when posture changes.

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use navigator.devicePosture. Start with this line.

JavaScript
navigator.devicePosture
CallWhat it does
navigator.devicePosturePrimary signature.

Built into the browser. Read navigator.devicePosture on Navigator — no import required.

Library declarations
JavaScript
navigator.devicePosture

Parameters

ParameterDescription
.typeRequired. "continuous" or "folded"
change eventOptional. Fires when posture updates
Feature detectRequired. Avoid errors on unsupported browsers

Return Value

Return ValueDescription
*DevicePosture object

JavaScript Examples

Example 1 — Feature-Detect

Check whether devicePosture exists before using it.

JavaScript
const supported = "devicePosture" in navigator;
console.log(supported ? "devicePosture available" : "devicePosture missing");
Try It Yourself

How It Works

  1. Use in. "devicePosture" in navigator is true only when the property exists.
  2. Expect limited support. Chrome/Edge 132+ may have it; Firefox and Safari usually do not.
  3. Log clearly. Students see support without throwing.
  4. Keep a fallback. Unsupported browsers keep the normal layout.

Example 2 — Read type

MDN-style report: print the current posture string when supported.

JavaScript
if (!("devicePosture" in navigator)) {
  console.log("unsupported");
} else {
  console.log(`Device posture: ${navigator.devicePosture.type}`);
}
Try It Yourself

How It Works

  1. Detect first. Exit early when the API is missing.
  2. Read .type. Returns "continuous" or "folded" (MDN).
  3. Expect continuous often. Flat phones and desktops report continuous.
  4. Use for layout. Branch UI only when you care about folded foldables.

Example 3 — Listen for change

Update the reported posture whenever the device folds or unfolds.

JavaScript
function reportPosture() {
  if (!("devicePosture" in navigator)) {
    console.log("unsupported");
    return;
  }
  console.log(`Device posture: ${navigator.devicePosture.type}`);
}

reportPosture();
if ("devicePosture" in navigator) {
  navigator.devicePosture.addEventListener("change", reportPosture);
}
Try It Yourself

How It Works

  1. Define a reporter. Reads and logs .type safely.
  2. Run once. Show the initial posture immediately.
  3. Subscribe to change. MDN fires this when posture updates.
  4. Re-read .type. The event itself is generic — the posture lives on the object.
Compatibility

Browser Support

Navigator.devicePosture (Device Posture API) is Experimental and Limited availability (not Baseline) on MDN. The API is a secure-context feature in the specification.

✓ Experimental · Not Baseline

Navigator.devicePosture

Supported in Chrome 132+, Edge 132+, Opera 117+, and Samsung Internet 17+. Not available in Firefox or Safari. Always feature-detect.

Limited Not Baseline
Google Chrome 132+ · Secure context
Supported
Microsoft Edge 132+ · Chromium
Supported
Opera 117+ · Chromium-based
Supported
Mozilla Firefox Not available
Unavailable
Apple Safari Not available (desktop / iOS)
Unavailable
Samsung Internet 17+ · Android
Supported
navigator.devicePosture Limited

Bottom line: Detect first, adapt foldable layouts when type is folded, and keep a solid responsive default everywhere else.

Frequently Asked Questions

It is a read-only Navigator property that returns a DevicePosture object so you can read whether the viewport is continuous (flat) or folded, and listen for posture changes on foldable devices (MDN).
Yes. MDN marks it Experimental and Limited availability (not Baseline). Always feature-detect and keep a default layout for unsupported browsers.
continuous means a flat screen posture (phones, tablets, desktops, or a foldable fully flat). folded means a book or laptop-style fold on a foldable device (MDN).
Call navigator.devicePosture.addEventListener("change", handler) and read navigator.devicePosture.type inside the handler.
Yes. The CSS media feature device-posture (for example @media (device-posture: folded)) can style layouts without JavaScript when supported.
No. The property is read-only. You read DevicePosture.type and listen for change events.

Next: doNotTrack

Learn the legacy navigator.doNotTrack tracking preference signal.

doNotTrack tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Navigator deviceMemory Property JavaScript Navigator doNotTrack Property