Accelerometer
The Accelerometer, LinearAccelerationSensor and GravitySensor APIs read the acceleration applied to a device in three dimensions, either including the effect of gravity, without its effect, or only its effect, respectively. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The Accelerometer, LinearAccelerationSensor and GravitySensor APIs read the acceleration applied to a device in three dimensions, either including the effect of gravity, without its effect, or only its effect, respectively. 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 | |
Accelerometer Experimental | 67 | 79 | | | 67 | |
Accelerometer Experimental The Accelerometer() constructor creates a new Accelerometer object which returns the acceleration of the device along all three axes at the time it is read. | 67 | 79 | | | 67 | |
x Experimental The x read-only property of the Accelerometer interface returns a number specifying the acceleration of the device along its x-axis. | 67 | 79 | | | 67 | |
y Experimental The y read-only property of the Accelerometer interface returns a number specifying the acceleration of the device along its y-axis. | 67 | 79 | | | 67 | |
z Experimental The z read-only property of the Accelerometer interface returns a number specifying the acceleration of the device along its z-axis. | 67 | 79 | | | 67 | |
| The GravitySensor interface of the Sensor APIs provides on each reading the gravity applied to the device along all three axes. | 91 | 91 | | | 91 | |
| The GravitySensor() constructor creates a new GravitySensor object which provides on each reading the gravity applied to the device along all three axes. | 91 | 91 | | | 91 | |
| The LinearAccelerationSensor interface of the Sensor APIs provides on each reading the acceleration applied to the device along all three axes, but without the contribution of gravity. | 67 | 79 | | | 67 | |
| The LinearAccelerationSensor() constructor creates a new LinearAccelerationSensor object which provides on each reading the acceleration applied to the device along all three axes, but without the contribution of gravity. | 67 | 79 | | | 67 | |
permission_accelerometer Experimental `accelerometer` permission | 62 | 79 | | | 62 | |
| Other | ||||||
html.elements.iframe.allow.accelerometer Experimental | 66 | 79 | | | 66 | |
http.headers.Permissions-Policy.accelerometer Experimental The HTTP Permissions-Policy header accelerometer directive controls whether the current document is allowed to gather information about the acceleration of the device through the Accelerometer interface. | 88 | 88 | | | 88 | |
Syntax
const accel = new Accelerometer({ frequency: 60 });
accel.addEventListener('reading', () => {
console.log('X:', accel.x, 'Y:', accel.y, 'Z:', accel.z);
});
accel.start(); Use cases
Use Accelerometer
Use Accelerometer when standard HTML needs a more specific platform feature, semantic signal, or browser capability.
Handle edge cases
Apply Accelerometer to solve a focused requirement without redesigning the whole page architecture.
Cautions
- Test Accelerometer 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 Accelerometer supports the intended task without making the page harder to perceive, understand, or operate.
Related links
Powered by web-features