Vérifiez vos balises meta viewport avec Alyze (accessibilité mobile)

Vous le savez, il est aujourd'hui fondamental qu'un site soit accessible facilement sur mobile. Pour cela, la première étape est d'insérer sur vos pages une balise meta viewport.
Catégorie : nouvelle fonctionnalité

Alyze vérifie dorénavant la bonne définition d'une balise meta viewport afin de vous aider à optimiser vos sites pour le mobile.

viewport alyze
L'erreur est signalée dans l'onglet Configuration sur les analyses de pages individuelles.

Le crawler bénéficie aussi de cette nouveauté et ça peut s'avérer bien pratique.

viewport crawler
Sur le crawler, les pages sans balise meta viewport valides sont signalées dans l'onglet Optimisation.
Utile pour vérifier qu'aucune page n'est oubliée.

meta viewport quèsaco ?

En un mot, la meta viewport permet de mentir sur la résolution de l'écran. C'est indispensable, car nos smartphones modernes ont souvent des résolutions très élevées, beaucoup trop pour que l’œil humain arrive à distinguer chaque pixel. Or, beaucoup de choses sur le web se définissent en pixels. Du côté de CSS, il faut donc utiliser une taille d'écran en pixels beaucoup plus petite que la taille réelle. Par exemple, pour que tout reste lisible sur un écran 5" de 1080 pixels de largeur, il faut faire "comme si" l'écran faisait moins de 400 pixels. C'est exactement ce que permet la balise meta viewport.

avec et sans viewport
Exemple de rendu d'une simple page web avec l'iPhone X. À gauche, sans balise meta viewport, à droite, avec.

La balise meta viewport s'insère, comme son nom l'indique parmi les balises meta de la page, au sein de la balise head. Différentes valeurs sont possibles, mais en règle générale, la valeur suivante est adaptée :

<meta name="viewport" content="width=device-width, initial-scale=1"/>

width=device-width permet d'utiliser une largeur en pixel "virtuels". Tout s'adapte ainsi automatiquement à l'appareil de l'utilisateur. initial-scale=1 aligne les pixels CSS sur les pixels virtuels.

Pour en savoir plus :

– Licence : CC BY-SA

Ce post est trop ancien pour être commenté.