Viewport :
C'est une métadonnée qui permet de définir les dimensions d'une page web sur une surface virtuelle.
<meta name="viewport" content="valeur largeur de l'écran, le niveau de zoom" />
Il est préférable de faire appel à une largeur déclarée par le terminal :
content="width=device-width" qui va permettre de coïncider des dimensions précises pour chaque appareil et donc de définir des dimensions adaptées en fonction du système d'exploitation.
En indiquant une taille de viewport cela risque de ne pas s'adapter à tous les appareils. La page sera dézoomée afin de rentrer dans cette espace disponible. Les textes seront alors illisibles.
Conseil : pour des question d'accessibilité est vivement déconseillé d’interdire le zoom.
Evitez de mettre ces attributs ensembles :
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" />
initial-scale = définit le niveau de zoom.
maximum-scale = fixe un niveau de zoom maximum.
user-scale = autorise ou empêche le zoom.
Balise <meta/> :
Cette balise se situe au niveau de l'en-tête soit entre les balises <head> ... </head>
C'est une balise qui permet de transmettre des informations au navigateurs. Par exemple l'encodage utf-8 ou la largeur d'écran sur un mobile.
Exemple :
<meta charset="utf-8"/>
<meta name="description" content="blog dédié au sujet du web. Ressources utiles et tutos pour vous apprendre le html, css et le javascript"/>
