Comment forcer l'orientation paysage et désactiver la rotation automatique sur les sites Web mobiles ?

Forcer l'orientation paysage sur le site mobile

À l'ère moderne du développement Web centré sur le mobile, il est crucial d'optimiser l'expérience utilisateur pour tous les appareils et les orientations. Cette question explore les moyens de désactiver la rotation automatique et d'appliquer l'orientation paysage uniquement sur un site mobile.

Solution CSS

Une approche consiste à utiliser des requêtes multimédias pour tester l'orientation de l'appareil. Dans la feuille de style portrait, vous pouvez masquer tout le contenu et afficher un message indiquant que l'application ne fonctionne qu'en mode paysage. Par exemple :

<code class="css">@media screen and (orientation: portrait) {
  body {
    display: none;
  }

  .orientation-message {
    display: block;
    text-align: center;
    font-size: 2rem;
    margin-top: 100px;
  }
}</code>

Solution jQuery

Vous pouvez également utiliser jQuery pour vérifier l'orientation de l'appareil et ajuster dynamiquement la mise en page en conséquence. Voici un exemple de script :

<code class="javascript">$(function() {
  var orientation = window.orientation;

  if (orientation == 0 || orientation == 180) {
    // Landscape mode
    $('body').css('transform', 'rotate(0)');
  } else {
    // Portrait mode
    $('body').css('transform', 'rotate(-90deg)');
  }
});</code>

Ce script vérifie la propriété window.orientation, qui indique l'orientation actuelle de l'appareil. En fonction de la valeur (0 ou 180 pour le paysage, 90 ou -90 pour le portrait), il fait pivoter le contenu de la page à l'aide de transformations CSS.

La solution spécifique que vous choisissez dépend de vos préférences et des capacités de vos appareils cibles. . Les approches CSS et jQuery fournissent des moyens efficaces pour forcer l'orientation paysage et désactiver la rotation automatique sur les sites mobiles.

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!