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

Magnetometer

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

Experimental: This is an experimental technology

Check the Browser compatibility table carefully before using this in production.

The Magnetometer interface of the Sensor APIs provides information about the magnetic field as detected by the device's primary magnetometer sensor.

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

EventTarget Sensor Magnetometer

Device APIs

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.

Browser support

Syntax

Use cases

Use Magnetometer

Handle edge cases

Cautions

Accessibility

Related links