Amélioration de l'expérience du site mobile : application de l'orientation paysage et désactivation de la rotation automatique

Lors de la conception pour la réactivité mobile, certaines orientations peuvent avoir un impact significatif sur l'utilisateur expérience. Cette question cherche une solution pour restreindre un site Web mobile à l'orientation paysage et désactiver la rotation automatique.

Solution CSS

Une façon d'y parvenir consiste à utiliser des requêtes multimédias CSS. En créant des feuilles de style distinctes pour les orientations paysage et portrait, vous pouvez contrôler le comportement du site en fonction de l'orientation de l'appareil. Voici comment l'implémenter :

1. Créez deux feuilles de style : style_l.css pour le paysage et style_p.css pour le portrait.
2. Dans style_l.css, incluez vos styles spécifiques au paysage qui affichent le contenu du site en pleine largeur.
3. Dans style_p.css, masquez tous les éléments et affichez un message demandant aux utilisateurs d'incliner leur appareil pour affichage optimal.
4. Ajoutez le code suivant à votre section d'en-tête HTML pour utiliser les requêtes multimédia :

Solution jQuery

jQuery peut également être utilisé pour détecter l'orientation de l'appareil et modifier les fonctionnalités du site en conséquence. Voici un exemple :

$(window).on("orientationchange", function() {
  if (window.orientation == 0 || window.orientation == 180) {
    // Landscape orientation
    // Enable landscape-specific features here
  } else if (window.orientation == 90 || window.orientation == -90) {
    // Portrait orientation
    // Show a message to rotate device
  }
});

Les deux solutions appliquent efficacement l'orientation paysage uniquement et désactivent la rotation automatique sur le site mobile, améliorant ainsi l'expérience de l'utilisateur en garantissant un affichage optimal du contenu dans l'orientation souhaitée.