Magnetometer | Frontend Practical Guide

Overview

The Magnetometer API reads magnetic field sensor data from the device's magnetometer. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`Magnetometer` Experimental	56	79			56
`Magnetometer` Experimental The Magnetometer() constructor creates a new Magnetometer object which returns information about the magnetic field as detected by a device's primary magnetometer sensor.	56	79			56
`x` Experimental The x read-only property of the Magnetometer interface returns a number specifying the magnetic field around the device's x-axis.	56	79			56
`y` Experimental The y read-only property of the Magnetometer interface returns a number specifying the magnetic field around the device's y-axis.	56	79			56
`z` Experimental The z read-only property of the Magnetometer interface returns a number specifying the magnetic field around the device's z-axis.	56	79			56
`permission_magnetometer` Experimental `magnetometer` permission	62	79			62
Other
`html.elements.iframe.allow.magnetometer` Experimental	66	79			66
`http.headers.Permissions-Policy.magnetometer` Experimental The HTTP Permissions-Policy header magnetometer directive controls whether the current document is allowed to gather information about the orientation of the device through the Magnetometer interface.	66	79			66

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT

const mag = new Magnetometer({ frequency: 10 });
mag.addEventListener('reading', () => {
  console.log('X:', mag.x, 'Y:', mag.y, 'Z:', mag.z);
});
mag.start();

Use cases

Use Magnetometer
Use Magnetometer when standard HTML needs a more specific platform feature, semantic signal, or browser capability.
Handle edge cases
Apply Magnetometer to solve a focused requirement without redesigning the whole page architecture.

Cautions

Test Magnetometer 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.

Overview

Browser support

Syntax

Use cases

Use Magnetometer

Handle edge cases

Cautions

Accessibility

Related links