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

965 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!