What do alpha, beta, and gamma mean?

Alpha (0-360°) is the compass heading — rotation around the vertical axis, where 0 is magnetic north and 90 is east. Beta (-180 to 180°) is front-to-back tilt — positive when the top of the phone tips toward you. Gamma (-90 to 90°) is left-to-right tilt — positive when the right edge tips down.

Why does my iPhone return null for alpha?

iOS Safari uses webkitCompassHeading instead of alpha, because the raw alpha reading wasn't tied to true north. This tool falls back to that field automatically, so the compass still tracks on iOS.

Does this work offline?

Yes. Once the page is loaded, orientation readings come straight from the OS sensor-fusion stack (gyro + accel + magnetometer). Nothing is sent anywhere.

Why do iOS devices need permission for orientation?

Since iOS 12.2, Apple gates motion / orientation events behind a permission prompt to prevent fingerprinting. The first time you press Enable, iOS asks once; once granted, readings flow for the page session.

What practical things use device orientation?

AR camera overlays, driving navigation that rotates the map, spirit levels, virtual camera controls in games, and the level (/sensor/level) and compass (/sensor/compass) tools on this site.

Is absolute=true reliable?

Absolute orientation needs a working magnetometer plus calibration. Many laptops and some tablets report absolute=false because they lack a magnetometer — the readings are still correct relative to where the device started, just not pinned to north.

Short answer

Device orientation is your phone's 3D pose, reported as three angles: alpha (compass heading, 0–360°), beta (front-back tilt, ±180°), and gamma (left-right tilt, ±90°). This page reads them live via the DeviceOrientation API and mirrors your device with a 3D phone and a compass needle. On iOS it falls back to webkitCompassHeading so the compass still works.

Sensors / 04

Device orientation.

Live alpha (compass), beta (front-back tilt), and gamma (left-right tilt). The 3D phone mirrors your device in real time, and the dial tracks your heading.

Notes

iOS requires permission. On laptops without a magnetometer, alpha is relative to startup, not true north.

Enable orientation sensor

On iOS, tap below to grant access. Android and desktop start automatically.

Live attitude

TOP

Heading—

α yaw

—

β pitch

—

γ roll

—

How it works

The browser exposes the OS's sensor-fusion stack via window.addEventListener("deviceorientation", …). The OS fuses gyroscope (angular velocity), accelerometer (gravity vector), and magnetometer (if present) into a single Euler-angle update at roughly 60 Hz.

The 3D phone applies rotateZ(α) rotateX(β) rotateY(γ) live, and the compass needle follows alpha (or iOS's webkitCompassHeading). Readings are the live pose — no sampling window.

Browser support: Chrome, Edge, Firefox, Safari on iOS and Android. Desktop Safari and Firefox fire the event with reduced fidelity (no magnetometer). DeviceOrientation requires a secure context (HTTPS or localhost).

Spirit level

Uses gamma to drive a bubble level UI.

Compass

Uses alpha for direction with interference detection.

Gyroscope

Raw rotation-rate sampling, separate from orientation.

Accelerometer

Gravity-included acceleration on all three axes.