Although device orientation APIs have been around for over 10 years now, they are still a complete mess of competing standards, experimental features and vendor specific prefixes.
This page is inspired by the very useful: timvolodine.github.io/deviceorientation-test, but updated to include API changes which have occurred since.
At the time of writing the mobile browser landscape looks like:
-
Google Chrome for Android 81
- Permission Trigger: addEventListener()
- deviceorientation (non absolute)
- deviceorientationabsolute (absolute; reference frame of device)
- AbsoluteOrientationSensor (absolute; reference frame of device or screen)
-
iOS 13
- Permission Trigger: user action event and then DeviceOrientationEvent requestPermission()
- deviceorientation (absolute via the vendor specific webkitCompassHeading; reference frame of screen)
-
Firefox for Android 68
- Permission Trigger: addEventListener()
- deviceorientation (non absolute)
- no support for absolute at all!
Some browsers only allow permission after the event is triggered with a user action event:
DeviceOrientationEvent
DeviceOrientationEvent in window
typeof DeviceOrientationEvent.requestPermission === 'function'
requestPermission() result
ondeviceorientation
ondeviceorientation in window
Absolute
orientation (α)
orientation (β)
orientation (γ)
orientation webkitCompassHeading
ondeviceorientationabsolute
ondeviceorientationabsolute in window
Absolute
orientation (α)
orientation (β)
orientation (γ)
orientation webkitCompassHeading
navigator.permissions
navigator.permissions in window
query({name: 'accelerometer'}) result
query({name: 'magnetometer'}) result
query({name: 'gyroscope'}) result
AbsoluteOrientationSensor
AbsoluteOrientationSensor in window
{referenceFrame: 'device'}
quaternion (a)
quaternion (b)
quaternion (c)
quaternion (d)
euler (α)
euler (β)
euler (γ)
{referenceFrame: 'screen'}
quaternion (a)
quaternion (b)
quaternion (c)
quaternion (d)
euler (α)
euler (β)
euler (γ)