Le problème peut être résolu avec une requête multimédia et quelques mathématiques. Voici une solution pour une orientation de portrait:
@media (max-device-aspect-ratio: 3/4) {
height: calc(100vw * 1.333 - 9%);
}
@media (max-device-aspect-ratio: 2/3) {
height: calc(100vw * 1.5 - 9%);
}
@media (max-device-aspect-ratio: 10/16) {
height: calc(100vw * 1.6 - 9%);
}
@media (max-device-aspect-ratio: 9/16) {
height: calc(100vw * 1.778 - 9%);
}
Puisque vh changera lorsque la barre d'url disparaîtra, vous devez déterminer la hauteur d'une autre manière. Heureusement, la largeur de la fenêtre d'affichage est constante et les appareils mobiles ne sont proposés que dans quelques proportions différentes; si vous pouvez déterminer la largeur et le rapport hauteur / largeur, un peu de maths vous donnera la hauteur de la fenêtre exactement comme vh devrait fonctionner. Voici le processus
1) Créez une série de requêtes multimédias pour les proportions que vous souhaitez cibler.
utilisez le rapport d'aspect de l'appareil au lieu du rapport d'aspect car ce dernier se redimensionnera lorsque la barre d'URL disparaîtra
J'ai ajouté `` max '' au ratio d'aspect de l'appareil pour cibler tous les rapports d'aspect qui se trouvent entre les plus populaires. Ils ne seront pas aussi précis, mais ils ne le seront que pour une minorité d'utilisateurs et seront toujours assez proches du bon vh.
souvenez-vous de la requête multimédia en utilisant horizontal / vertical, donc pour le portrait, vous devrez inverser les chiffres
2) pour chaque requête multimédia, multipliez le pourcentage de hauteur verticale dans lequel vous voulez que l'élément vw soit par l'inverse du rapport hauteur / largeur.
- Puisque vous connaissez la largeur et le rapport largeur / hauteur, il vous suffit de multiplier le% que vous voulez (100% dans votre cas) par le rapport hauteur / largeur.
3) Vous devez déterminer la hauteur de la barre d'URL, puis moins celle de la hauteur. Je n'ai pas trouvé de mesures exactes, mais j'utilise 9% pour les appareils mobiles en mode paysage et cela semble fonctionner assez bien.
Ce n'est pas une solution très élégante, mais les autres options ne sont pas non plus très bonnes, étant donné qu'elles sont:
Votre site Web semble bogué à l'utilisateur,
ayant des éléments de taille incorrecte, ou
Utilisation de javascript pour certains styles de base ,
L'inconvénient est que certains appareils peuvent avoir des hauteurs de barre d'URL ou des proportions différentes de celles des plus populaires. Cependant, en utilisant cette méthode si seul un petit nombre d'appareils subit l'ajout / la soustraction de quelques pixels, cela me semble beaucoup mieux que tout le monde ayant un site Web redimensionné lors du balayage.
Pour vous faciliter la tâche, j'ai également créé un mixin SASS:
@mixin vh-fix {
@media (max-device-aspect-ratio: 3/4) {
height: calc(100vw * 1.333 - 9%);
}
@media (max-device-aspect-ratio: 2/3) {
height: calc(100vw * 1.5 - 9%);
}
@media (max-device-aspect-ratio: 10/16) {
height: calc(100vw * 1.6 - 9%);
}
@media (max-device-aspect-ratio: 9/16) {
height: calc(100vw * 1.778 - 9%);
}
}