Comment puis-je détecter les changements d'orientation en JavaScript ?

Détecter les changements d'orientation à l'aide de JavaScript

La détection des changements d'orientation du navigateur sur les appareils mobiles comme l'iPad ou la Galaxy Tab est essentielle pour créer des sites Web réactifs et applications.

Utilisation des médias CSS Requêtes

Bien que les requêtes multimédias puissent détecter les changements d'orientation, elles ne constituent peut-être pas la méthode la plus appropriée pour les mises à jour en temps réel. Les requêtes multimédias déclenchent généralement des changements de style en fonction de points d'arrêt prédéterminés et peuvent ne pas être suffisamment sensibles pour les applications qui nécessitent des réponses immédiates aux changements d'orientation.

Utilisation de l'API d'orientation de l'écran

A plus Une approche efficace consiste à utiliser l'API d'orientation de l'écran, qui fournit un moyen plus direct de surveiller les changements d'orientation. Cette API a évolué depuis son introduction initiale, l'événement orientationChange étant obsolète au profit de screenOrientation et de l'événement screenorientation.onchange.

Exemple d'implémentation

Pour utiliser l'écran API d'orientation, ajoutez un écouteur d'événement à l'événement DOMContentLoaded de la fenêtre, comme indiqué dans le code ci-dessous :

window.addEventListener("DOMContentLoaded", () => {
  // Get the orientation output element
  const output = document.getElementById("o9n");

  // Define the displayOrientation function to display the current orientation
  const displayOrientation = () => {
    const screenOrientation = screen.orientation.type;
    output.innerHTML = `The orientation of the screen is: ${screenOrientation}`;
    // Log appropriate messages based on the orientation
    // ...
  };

  // Check if the screen object and its orientation property are available
  if (screen && screen.orientation !== null) {
    try {
      // Add an event listener to the screenorientation.onchange event
      window.screen.orientation.onchange = displayOrientation;
      // Trigger the displayOrientation function initially to display the current orientation
      displayOrientation();
    } catch (e) {
      // Handle any errors by displaying the error message
      output.innerHTML = e.message;
    }
  }
});

Ce code démontre l'utilisation de l'API d'orientation d'écran. En utilisant cette API, vous pouvez détecter et répondre aux changements d'orientation en temps réel, vous permettant ainsi d'adapter la présentation et les fonctionnalités de votre site Web ou de votre application en conséquence.

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!