Comment utiliser la balise meta viewport ?

Afficher correctement la version mobile d'un site.

Apple a fournit aux développeurs un outil pour configurer l'affichage sur un navigateur mobile. Cet outil, reprit maintenant sur la plupart des navigateurs, est une balise meta HTML nommée Viewport. La balise meta viewport permet de définir la taille par défaut de l'écran et de régler le zoom.

Voici la balise que j'utilise pour la version mobile de Tuto2Dev :

La balise meta viewport

<meta name="viewport" content="width=device-width, minimum-scale=1.0" />

Voici les attributs possibles :

  • width : Largeur de l'écran en pixels. La valeur device-width adapte tout seul la largeur à la résolution de l'écran.
  • height : Idem pour la hauteur. La valeur device-height adapte tout seul la hauteur à la résolution de l'écran.
  • initial-scale : Echelle du zoom par défaut.
  • minimum-scale : Zoom minimum.
  • maximum-scale : Zoom maximum.
  • user-scalable : Le visiteur a le droit ou non de zoomer. Par défaut la valeur est 'yes'. Pour l'interdire il suffit d'indiquer 'no' ou '0'.