Comment puis-je détecter les changements d'orientation dans les navigateurs mobiles à l'aide de JavaScript ?

Détection des changements d'orientation dans les navigateurs sur les appareils mobiles à l'aide de JavaScript

Les navigateurs mobiles modernes offrent des moyens de détecter les changements d'orientation de l'appareil, permettant développeurs pour ajuster l'interface utilisateur ou proposer différentes expériences en fonction de l'orientation actuelle.

Détection de l'orientation avec l'écran API d'orientation

La méthode privilégiée pour détecter les changements d'orientation dans les navigateurs modernes consiste à utiliser l'API screen.orientation. Cette API fournit l'interface screenOrientation, qui expose l'événement onchange. Lorsque l'orientation de l'appareil change, cet événement est déclenché, permettant à votre code JavaScript de répondre en conséquence.

Pour utiliser cette API, vous pouvez procéder comme suit :

1. Ajouter un événement écouteur pour l'événement screenorientation.onchange.
2. Dans le gestionnaire d'événements, récupérez l'orientation actuelle à l'aide de screen.orientation.type.
3. Vérifiez la valeur d'orientation (par exemple, paysage principal, portrait secondaire) et prenez les mesures appropriées.

Voici un exemple d'extrait :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!