Limited support Use with care and provide a fallback when broad support matters.

Gyroscope

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The Gyroscope interface of the Sensor APIs provides on each reading the angular velocity of the device along all three axes.

To use this sensor, the user must grant permission to the 'gyroscope' device sensor through the Permissions API. In addition, this feature may be blocked by a Permissions Policy set on your server.

EventTarget Sensor Gyroscope

Device APIs

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