v150 · Device Orientation

Orientation permission & tilt

Tap the button to call the real DeviceOrientationEvent.requestPermission() from a user gesture. On "granted", the page subscribes to deviceorientation and tilts the card + spirit level with your device's live alpha/beta/gamma. No sensor (e.g. a desktop)? The manual preview below lets you drive the same visual by hand — clearly labelled, never dressed up as sensor data.

permission: unknown
Tap "Enable orientation access" to request permission.
device

tilt card (β·γ)

spirit level

alpha (Z, 0–360° — frame pending)—
beta (front-back X, −180–180°)—
gamma (left-right Y, −90–90°)—
events received0

Manual preview SIMULATION — not sensor data

Check each sample's event.absolute: a relative sample uses an arbitrary initial reference, so its alpha is not a compass heading; an absolute sample uses the Earth's reference frame via a magnetometer. To explicitly request magnetometer permission, pass true for the optional absolute parameter and listen for deviceorientationabsolute. The spec currently marks its permission integration and the absolute event as at risk.

0°
0°
document.querySelector("button").addEventListener("click", async () => {
  // requestPermission MUST be called from a user gesture —
  // without transient activation the promise rejects with NotAllowedError
  if (typeof DeviceOrientationEvent.requestPermission === "function") {
    const state = await DeviceOrientationEvent.requestPermission(); // "granted" | "denied"
    if (state !== "granted") return;
  }
  window.addEventListener("deviceorientation", (e) => {
    // e.alpha (0–360), e.beta (−180–180), e.gamma (−90–90)
    tilt(e.beta, e.gamma);
  });
});

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗