Comment pouvez-vous surmonter le problème de l'interférence du clavier logiciel avec les requêtes multimédia CSS pour l'orientation du périphérique ?-tutoriel CSS-php.cn

Comment pouvez-vous surmonter le problème de l'interférence du clavier logiciel avec les requêtes multimédia CSS pour l'orientation du périphérique ?

Linda Hamilton

Libérer： 2024-10-26 08:37:30

original

881 Les gens l'ont consulté

How can you overcome the issue of soft-keyboard interference with CSS media queries for device orientation?

Requêtes multimédia CSS et orientation des appareils : surmonter le problème du clavier logiciel

Introduction

Les requêtes multimédias en CSS fournissent un mécanisme puissant pour appliquer des styles basés sur les fonctionnalités de l'appareil telles que l'orientation. Cependant, sur certains appareils, le clavier logiciel peut interférer avec ces règles d'orientation, entraînant un rendu incorrect des pages Web. Cet article explore des solutions alternatives pour résoudre ce problème.

Requêtes média pour l'orientation

Les requêtes média peuvent être utilisées pour cibler les orientations portrait et paysage en utilisant la syntaxe suivante :

<code class="css">@media all and (orientation:portrait) { /* Portrait styles */ }

@media all and (orientation:landscape) { /* Landscape styles */ }</code>

Copier après la connexion

Bien que cette approche fonctionne bien pour la plupart des appareils, elle échoue lorsque le clavier logiciel est ouvert en mode portrait. La zone visible réduite force la page à s'afficher en orientation paysage, brisant la mise en page.

Solution alternative

Une alternative consiste à utiliser JavaScript pour détecter le clavier logiciel et appliquer dynamiquement des styles basés sur l’orientation. Ceci peut être réalisé en utilisant la propriété window.innerHeight, qui renvoie la hauteur de la fenêtre du navigateur. Lorsque le clavier logiciel est ouvert, la hauteur de la fenêtre diminue, déclenchant une fonction JavaScript :

<code class="js">window.addEventListener('resize', function() {
  if (window.innerHeight < screen.height) {
    // Soft-keyboard is open
    document.documentElement.classList.add('soft-keyboard-open');
  } else {
    // Soft-keyboard is closed
    document.documentElement.classList.remove('soft-keyboard-open');
  }
});

Copier après la connexion

Une fois le clavier logiciel détecté, les classes CSS peuvent être appliquées au élément pour cibler les orientations portrait ou paysage avec des styles personnalisés :

<code class="css">.soft-keyboard-open.portrait { /* Portrait styles with soft-keyboard open */ }

.soft-keyboard-open.landscape { /* Landscape styles with soft-keyboard open */ }

.portrait { /* Standard portrait styles */ }

.landscape { /* Standard landscape styles */ }</code>

Copier après la connexion

Autres options

Une autre option mentionnée dans la question d'origine consiste à ajouter des classes au

<code class="html"><html class="landscape">
  ...
</html>

.landscape .landscape-only { display:block; }
.landspace .portrait-only  { display:none; }
.portrait .portrait-only   { display:block; }
.portrait .landscape-only  { display:none; }</p></code>

Copier après la connexion

Cette approche nécessite l'utilisation de JavaScript pour définir l'attribut de classe de l'élément élément basé sur l’orientation. Elle n'est peut-être pas aussi fiable que l'approche de requête @media, en particulier sur les appareils dotés de tailles d'écran non standard.

Progrès récents

Plus récemment, de nouvelles fonctionnalités de requête multimédia ont été introduits pour offrir une meilleure prise en charge de la détection d'orientation sans le problème du clavier logiciel. Ceux-ci incluent :

min-aspect-ratio et max-aspect-ratio
orientation-lock et orientation-unlock

Ils permettent une visualisation plus précise ciblage des orientations et du comportement de l'écran lorsque le clavier logiciel est ouvert.

Conclusion

Le problème du clavier logiciel qui interfère avec les requêtes multimédia CSS pour l'orientation est un défi courant . En mettant en œuvre les solutions alternatives évoquées ci-dessus, les développeurs peuvent garantir un rendu cohérent des pages Web sur les appareils dotés de claviers programmables, offrant ainsi une meilleure expérience utilisateur.

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

Comment pouvez-vous surmonter le problème de l'interférence du clavier logiciel avec les requêtes multimédia CSS pour l'orientation du périphérique ?