JavaScript Navigator devicePosture Property

What You’ll Learn

navigator.devicePosture returns a DevicePosture object for foldable-aware UIs. Learn type (continuous / folded), change events, CSS device-posture, five examples, and try-it labs.

Introduction

Foldable phones and dual-screen devices can bend into book or laptop shapes. Layouts that look great flat may need a different split when the screen is folded.

The Device Posture API exposes that physical state through navigator.devicePosture. You read .type and can listen for change when the user folds or unfolds the device.

Understanding the devicePosture Property

Think of navigator.devicePosture as a live sensor for “is the screen flat or folded?” You do not assign to it — you read type and subscribe to events.

• type: "continuous" — flat posture (typical devices; foldables fully flat).
• type: "folded" — book / laptop fold posture on foldables.
• change — event when posture updates.
• CSS — @media (device-posture: continuous | folded) when supported.

📝 Syntax

General form of the property:

navigator.devicePosture

Value

• A DevicePosture object with a type string and a change event.

Common patterns

// MDN-style report + listener:
function reportPostureOutput() {
  console.log(`Device posture: ${navigator.devicePosture.type}`);
}

if ("devicePosture" in navigator) {
  reportPostureOutput();
  navigator.devicePosture.addEventListener("change", reportPostureOutput);
}

Examples Gallery

Examples follow MDN Device Posture / navigator.devicePosture patterns. Prefer Try It Yourself on a supporting / emulated foldable. Use View Output for expected messaging.

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

devicePosture missing
(or "devicePosture available" when the API is enabled)

if (!("devicePosture" in navigator)) {
  console.log("unsupported");
} else {
  console.log("type: " + navigator.devicePosture.type);
}

type: continuous
(or folded on a folded foldable; or unsupported)

function reportPostureOutput() {
  if (!("devicePosture" in navigator)) {
    return "Device posture: unsupported";
  }
  // type returns "continuous" or "folded"
  return "Device posture: " + navigator.devicePosture.type;
}

console.log(reportPostureOutput());

Device posture: unsupported
(or Device posture: continuous / folded)

function pickLayoutMode() {
  if (!("devicePosture" in navigator)) return "standard";
  return navigator.devicePosture.type === "folded"
    ? "split-panels"
    : "standard";
}

console.log("layout: " + pickLayoutMode());

layout: standard
(or split-panels when type is folded)

const lines = [];

function report(label) {
  if (!("devicePosture" in navigator)) {
    lines.push(label + ": unsupported");
    return;
  }
  lines.push(label + ": " + navigator.devicePosture.type);
}

report("initial");
if ("devicePosture" in navigator) {
  navigator.devicePosture.addEventListener("change", function () {
    report("changed");
    console.log(lines.join("\n"));
  });
}
console.log(lines.join("\n"));
// Fold/unfold (or use foldable emulation) to see "changed" in Try It

initial: continuous
(then "changed: …" when posture updates)

🚀 Common Use Cases

• Dual-pane apps — list + detail when folded, single stack when flat.
• Reading / chat — keep conversation on one side of the fold.
• Video + controls — put player above the hinge and controls below.
• CSS + JS combo — style with device-posture media; orchestrate with JS.
• Progressive enhancement — ignore posture when the API is missing.

📝 Notes

• Experimental and not Baseline — support is limited.
• Not Deprecated or Non-standard on MDN.
• Most non-foldable devices report continuous when the API exists.
• Consider CSS @media (device-posture: …) alongside JS.
• Related: doNotTrack, Window, JavaScript hub.

💡 Best Practices