Limited supportUse with care and provide a fallback when broad support matters.
Device APIs Limited support

Gyroscope

The Gyroscope API reads the angular velocity of a device in three dimensions. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Device APIs

Overview

The Gyroscope API reads the angular velocity of a device in three dimensions. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
Gyroscope
67
79
67
Gyroscope

The Gyroscope() constructor creates a new Gyroscope object which provides on each reading the angular velocity of the device along all three axes.
67
79
67
x

The x read-only property of the Gyroscope interface returns a number specifying the angular velocity of the device along its x-axis.
67
79
67
y

The y read-only property of the Gyroscope interface returns a number specifying the angular velocity of the device along its y-axis.
67
79
67
z

The z read-only property of the Gyroscope interface returns a number specifying the angular velocity of the device along its z-axis.
67
79
67
permission_gyroscope
Experimental

`gyroscope` permission
51
79
51
Other
html.elements.iframe.allow.gyroscope
Experimental
66
79
66
http.headers.Permissions-Policy.gyroscope
Experimental

The HTTP Permissions-Policy header gyroscope directive controls whether the current document is allowed to gather information about the orientation of the device through the Gyroscope interface.
88
88
88
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT 
const gyro = new Gyroscope({ frequency: 60 });
gyro.addEventListener('reading', () => {
  console.log('X:', gyro.x, 'Y:', gyro.y, 'Z:', gyro.z);
});
gyro.start();

Use cases

  • Use Gyroscope

    Use Gyroscope when standard HTML needs a more specific platform feature, semantic signal, or browser capability.

  • Handle edge cases

    Apply Gyroscope to solve a focused requirement without redesigning the whole page architecture.

Cautions

  • Test Gyroscope in your target browsers and input environments before depending on it as a primary behavior.
  • Provide a fallback path or acceptable degradation strategy when support is still limited.

Accessibility

  • Make sure Gyroscope supports the intended task without making the page harder to perceive, understand, or operate.

Related links

Powered by web-features