Le clavier logiciel perturbe les styles d'orientation : comment pouvons-nous y remédier ?-tutoriel CSS-php.cn

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

Mary-Kate Olsen

Libérer： 2024-10-26 17:20:03

original

832 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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