DevicePosture: change event

{{APIRef}} {{SeeCompatTable}} 

The change event of the {{domxref("DevicePosture")}}  interface fires when the device’s posture changes, for example when a foldable device goes from folded to continuous posture.

Syntax

Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}} , or set an event handler property.

addEventListener("change", (event) => { })

onchange = (event) => { }

Event type

A generic {{domxref("Event")}} .

Examples

const postureOutput = document.getElementById("currentPosture");

function reportPostureOutput() {
  // type property returns "continuous" or "folded"
  postureOutput.textContent = `Device posture: ${navigator.devicePosture.type}`;
}

navigator.devicePosture.addEventListener("change", reportPostureOutput);

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

• CSS {{cssxref("@media/device-posture", "device-posture")}}  @media feature
• Device Posture API
• Origin trial for Foldable APIs on developer.chrome.com (2024)