How Can I Detect Orientation Changes in Mobile Browsers using JavaScript?

Detecting Orientation Changes in Browsers on Mobile Devices using JavaScript

Modern mobile browsers provide ways to detect changes in the orientation of the device, allowing developers to adjust the user interface or provide different experiences based on the current orientation.

Detecting Orientation with Screen Orientation API

The preferred method for detecting orientation changes in modern browsers is to use the screen.orientation API. This API provides the screenOrientation interface, which exposes the onchange event. When the orientation of the device changes, this event is triggered, allowing your JavaScript code to respond accordingly.

To use this API, you can do the following:

1. Add an event listener for the screenorientation.onchange event.
2. In the event handler, retrieve the current orientation using screen.orientation.type.
3. Check the orientation value (e.g., landscape-primary, portrait-secondary) and take appropriate actions.

Here's an example snippet:

window.addEventListener("DOMContentLoaded", () => {
  const output = document.getElementById("o9n");

  const displayOrientation = () => {
    const screenOrientation = screen.orientation.type;
    output.innerHTML = `The orientation of the screen is: ${screenOrientation}`;
    // Check the orientation and log messages accordingly
  };

  if (screen && screen.orientation !== null) {
    try {
      window.screen.orientation.onchange = displayOrientation;
      displayOrientation();
    } catch (e) {
      output.innerHTML = e.message;
    }
  }
});

The above is the detailed content of How Can I Detect Orientation Changes in Mobile Browsers using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!