Introduction to Device Orientation Events API

Fortunately, there are tools available to help with this. The Device Orientation Events API is one such tool that can make it easier to create a seamless experience across different devices.

Device Orientation Events API

The Device Orientation Events API is a Web API that allows you to access information about the orientation of a device. It provides a set of events that are triggered when the device orientation changes, allowing you to respond to those changes and update the user interface accordingly.

How it works

The Device Orientation Events API detects the device's orientation using sensors on the device, such as the accelerometer and gyroscope. These sensors provide information about the device's rotation, tilt, and acceleration, which the APU uses to determine its orientation. When the device orientation changes, the API generates events that the application can handle.

List of events provided by the API

The Device Orientation Events API provides three main events for detecting changes in device orientation:

deviceorientation

This event is triggered when the device orientation changes. It provides information about the device's rotation, tilt, and acceleration, which can be used to determine the device's orientation. The event returns an object with properties representing the orientation, such as alpha, beta, and gamma.

js
Copy
window.addEventListener("deviceorientation", function(event) {
  const alpha = event.alpha; // device rotation around z-axis
  const beta = event.beta; // device rotation around x-axis
  const gamma = event.gamma; // device rotation around y-axis
});

orientationchange

This event is triggered when the device's screen orientation changes, for example, from portrait to landscape. It provides information about the new screen orientation that can be used to update the user interface.

js
Copy
window.addEventListener("orientationchange", function() {
  const orientation = screen.orientation.angle; // current screen orientation
});

compassneedscalibration

This event is triggered when the device's compass needs calibration. It indicates that the compass readings may be inaccurate and that the device should be recalibrated.

js
Copy
window.addEventListener("compassneedscalibration", function() {
  alert("Compass needs calibration. Please rotate.");
});

Support

The Device Orientation Events API is supported by most modern browsers, including Chrome, Firefox, Safari, and Opera. However, it is important to note that not all devices support this API. For example, desktop computers typically do not have an accelerometer or gyroscope.

Wrap up

That's all from this guide. This API is really useful for a variety of use cases, such as dynamically adjusting styles based on user input, creating animations, or applying styles conditionally based on certain criteria. If you want, you can read about more APIs like this in our Web APIs category.