Maison > Article > interface Web > Le clavier logiciel perturbe les styles d’orientation : comment pouvons-nous y remédier ?

Le clavier logiciel perturbe les styles d’orientation : comment pouvons-nous y remédier ?

Mary-Kate Olsenoriginal: 2024-10-26 17:20:03821parcourir

Soft Keyboard Disrupts Orientation Styles: How Can We Fix It?

Requête multimédia CSS : le clavier logiciel perturbe les règles d'orientation – Une solution alternative

Le problème se pose lors de l'utilisation de requêtes multimédia CSS pour appliquer des requêtes basées sur l'orientation styles sur les tablettes. Le problème se produit lorsque l'utilisateur appuie sur un champ de saisie, déclenchant l'apparition du clavier virtuel. La zone visible de la page Web est réduite, ce qui entraîne l'affichage de la page en mode CSS paysage au lieu du mode portrait.

Une solution potentielle pourrait être de supprimer les médias (orientation : portrait) et (orientation : paysage) requêtes. Au lieu de cela, utilisez la requête multimédia (rapport d’aspect min : 13/9) pour le mode paysage et la requête multimédia (rapport d’aspect maximum : 13/9) pour le mode portrait. Ces requêtes spécifient le rapport hauteur/largeur de la fenêtre d'affichage au lieu de l'orientation de l'appareil.

<code class="css">@media screen and (min-aspect-ratio: 13/9) {
  /* Landscape styles here */
}

@media screen and (max-aspect-ratio: 13/9) {
  /* Portrait styles here */
}</code>

Une autre approche consiste à attribuer des classes à l'élément HTML en fonction de l'orientation actuelle et à cibler ces classes dans le CSS.

<code class="html"><html class="landscape">
<body>
    <h1 class="landscape-only">Element Heading - Landscape</h1>
    <h1 class="portrait-only">Element Heading - Portrait</h1>
</body>
</html></code>

<code class="css">.landscape .landscape-only { display:block; }
.landspace .portrait-only  { display:none; }
.portrait .portrait-only   { display:block; }
.portrait .landscape-only  { display:none; }</code>

Cette solution nécessite JavaScript pour gérer l'ajout et la suppression de classes en fonction du changement d'orientation.

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!

JavaScript css html for using class this display viewport input issue

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment redimensionner dynamiquement les SVG pour les adapter aux conteneurs parents ?Article suivant：Comment redimensionner dynamiquement les SVG pour les adapter aux conteneurs parents ?

Articles Liés

Voir plus