CSS: Les unités de hauteur de vue (vh) et de largeur de vue (vw) sont-elles largement prises en charge?
J'utilise 100vh pour centrer une div verticalement avec line-height. Ce site place le support pour vh et vw à environ 70%, est-ce une évaluation juste? Recommanderiez-vous l'utilisation d'unités de fenêtre d'affichage lors de la construction d'un site? Je sais que cela est un peu subjectif, je cherche simplement à obtenir l'avis de développeurs Web plus expérimentés que moi.
EDIT: Merci pour la contribution de tout le monde, je veux que ça ait l'air bien sur le mobile, alors je suppose que je vais devoir renoncer à vh.
La statistique est clairement et c'est une évaluation juste, à mon point de vue.
Je pense que la décision doit être prise par vous. Si vous souhaitez pérenniser votre site Web à l'aide de la technologie la plus récente, tout en sachant qu'il y a actuellement des inconvénients, n'hésitez pas.
Si vous n'êtes pas prêt à investir un peu plus dans votre présence en ligne, restez fidèle à l'ancienne méthode, qui n'est en aucun cas erronée.
ÉDITER: lorsque je veux créer une conception sensible, je commence par développer pour les appareils mobiles, puis la version pour ordinateur de bureau, afin de garantir le bon fonctionnement de mes fenêtres de visualisation, car le support de Mobile manque à certains points (notamment vmax). MAIS à ce sujet, vous pouvez demander à 50 gars et les chances qu’ils disent tous quelque chose d’autre sont plutôt bons.
utiliser à la fois CSS vh et jQuery, c'est plus sûr.
jQuery exemple:
var clientHeight = $( window ).height();
$('.element').css('height', clientHeight);
et CSS:
.element {height: 100vh;}
Les unités de visualisation sont excellentes, mais la plupart des constructeurs de navigateurs mobiles ont réussi à rendre vh inutilisable dans la pratique.
Lorsque vous commencez à faire défiler ou changez de direction, la barre d’adresse disparaîtra ou reviendra; alors vous vous arrêtez, relâchez votre doigt et la valeur vh sera soudainement mise à jour avec tout élément l'utilisant, ce qui produira un cauchemar UX (l'utilisateur ne s'attend à rien à redimensionner à la fin du défilement, en modifiant les proportions des éléments existants, etc. - affichage du contenu, etc).
La page à laquelle vous avez accédé répond à votre question vraiment.
Cela dépend des navigateurs que vous devez prendre en charge.
La prise en charge partielle dans IE9 fait référence à la prise en charge de "vm" au lieu de "vmin". La prise en charge partielle dans iOS7 est due au comportement erroné de l'unité vh. Toute autre prise en charge partielle fait référence à la non prise en charge de l'unité "vmax".
Cela indique que l'utilisation des unités de la fenêtre d'affichage pourrait être "boguée" dans iOS7. Je ne recommanderais pas d'utiliser des unités de fenêtres, mais plutôt d'utiliser:
- Pixles: par exemple
height: 500px; - Pourcentage: p. Ex.
height: 50%;
Ces valeurs sont largement acceptées et produiront les meilleurs résultats.
Eh bien, vous pouvez voir que cela existe déjà pour les navigateurs de bureau et que la prise en charge sur les appareils mobiles est assez limitée. Cela dépend donc de savoir si vous voulez créer un site qui a une belle apparence sur les ordinateurs ou un site basé sur les pixels plus compatible qui fonctionne aussi sur les téléphones.