Wie kann ich mithilfe von JavaScript Ausrichtungsänderungen in mobilen Browsern erkennen?

Erkennen von Ausrichtungsänderungen in Browsern auf mobilen Geräten mithilfe von JavaScript

Moderne mobile Browser bieten Möglichkeiten, Änderungen in der Ausrichtung des Geräts zu erkennen und ermöglichen so Entwickler können die Benutzeroberfläche anpassen oder unterschiedliche Erlebnisse basierend auf der aktuellen Ausrichtung bereitstellen.

Ausrichtung anhand der Bildschirmausrichtung erkennen API

Die bevorzugte Methode zur Erkennung von Ausrichtungsänderungen in modernen Browsern ist die Verwendung der screen.orientation API. Diese API stellt die screenOrientation-Schnittstelle bereit, die das onchange-Ereignis verfügbar macht. Wenn sich die Ausrichtung des Geräts ändert, wird dieses Ereignis ausgelöst, sodass Ihr JavaScript-Code entsprechend reagieren kann.

Um diese API zu verwenden, können Sie Folgendes tun:

1. Ein Ereignis hinzufügen Listener für das Ereignis screenorientation.onchange.
2. Rufen Sie im Ereignishandler die aktuelle Ausrichtung mit screen.orientation.type ab.
3. Überprüfen Sie die Ausrichtungswert (z. B. Querformat primär, Hochformat sekundär) und ergreifen Sie entsprechende Maßnahmen.

Hier ist ein Beispielausschnitt:

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;
    }
  }
});

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von JavaScript Ausrichtungsänderungen in mobilen Browsern erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!