Comment surmonter les problèmes d'orientation des requêtes multimédia CSS sur les tablettes : cela vaut-il la peine d'abandonner les requêtes multimédias ?

Résoudre les problèmes d'orientation des requêtes multimédias CSS avec une méthode alternative

Les requêtes multimédias CSS offrent un moyen pratique d'ajuster les styles en fonction de l'orientation de l'appareil. Cependant, sur certaines tablettes, notamment celles fonctionnant sous Android, la présence du clavier logiciel lors de la saisie peut perturber cette fonctionnalité.

Pour contourner ce problème, une solution alternative consiste à éviter l'utilisation de requêtes multimédias pour l'orientation. style basé. Au lieu de cela, des classes peuvent être ajoutées et supprimées dynamiquement pour cibler des éléments spécifiques en fonction de l'orientation actuelle de l'appareil.

Cette approche commence par attribuer une classe, telle que « portrait » ou « paysage », à l'élément HTML. Par la suite, des règles CSS sont définies pour contrôler l'affichage des éléments en fonction de la présence de ces classes. Par exemple :

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

Cela garantit que les éléments appropriés sont visibles quelle que soit l'orientation, sans dépendre des requêtes des médias.

Une alternative améliorée : min-Aspect-Ratio et max-Aspect-Ratio

Une solution plus récente et robuste consiste à utiliser des requêtes multimédias qui ciblent le rapport hauteur/largeur de l'écran. Plus précisément, les requêtes multimédias suivantes peuvent être utilisées :

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

Cette méthode exploite le fait que le rapport hauteur/largeur d'un écran change de manière significative entre les orientations portrait et paysage. Ainsi, il fournit un moyen précis et fiable de contrôler les styles CSS en fonction de l'orientation, même en présence du clavier logiciel.

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!