Maison >interface Web >tutoriel CSS >Le clavier logiciel perturbe les styles d'orientation : comment pouvons-nous y remédier ?
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!