Viewport - Définition  

Accueil > lettre V > Viewport

Viewport

La balise meta viewport permet de définir les dimensions d'une page web. La balise permet de définir la largeur de la page, la hauteur et même le zoom sur cette page. Cette balise est utile pour l'affichage d'une page sur mobile (exemple : iPhone, iPod ...).

Utilisation

Le code suivant est à adapter (remplacer avec la valeur souhaitée) puis à insérer la balise "head" :
  1. <meta name="viewport" content="VALEUR" />

Voici un tableau avec les attributs possible ainsi que les valeurs associées:

Attribut Valeurs possibles Description
width 1 à 10000 (minimum dépend du mobile) ou "device-width" Largeur en pixel de la page web. La valeur "device-width" permet de redimensionner le site sur toute la largeur de l'écran.
height 1 à 10000 (minimum dépend du mobile) ou "device-height" Hauteur en pixel de la page web. La valeur "device-height" permet de redimensionner le site sur toute la hauteur de l'écran.
inital-scale 0.1 à 10 Profondeur initial du zoom. Une grande valeur permet de zoomer tandis qu'une petite valeur permet de dé-zoomer. Par défaut la valeur est "1.0".
user-scalable "yes" (oui) ou "no" (non) Possibilité ou non de zoomer / dé-zoomer sur la page. Valeur par défaut : "yes"
minimum-scale 0.1 à 10.0 Définir le dé-zoom minimum. La valeur par défaut est 0.25 mais peut s'ajuster selon la largeur de l'écran "width".
maximum-scale 0.1 to 10.0 Définir le zoom maximum. La valeur par défaut est 5.0 mais peut s'ajuster selon la largeur de l'écran "width"
target-densityDpi "device-dpi" (pas de zoom), "medium-dpi" (zoom x1.3) ou "high-dpi" (zoom x1.5) Modifie la densité de l'écran. Permet de zoomer pour les écrans avec une meilleure résolution (DPI). Disponible que pour Nokia actuellement Valeur par défaut : "device-dpi"

Exemples d'utilisations

Afficher la page web seulement sur 500px de large :
  1. <meta name="viewport" content="width=500" />
Afficher la page web sur toute la largeur de l'écran :
  1. <meta name="viewport" content="width=device-width" />
Aficher la page web sur toute la hauteur de l'écran :
  1. <meta name="viewport" content="height=device-height" />
Afficher la page web sans zoom :
  1. <meta name="viewport" content="initial-scale=1.0" />
Empêcher l'utilisateur de zoomer sur la page :
  1. <meta name="viewport" content="user-scalable=no" />
Définir un zoom minimum de 0.5 :
  1. <meta name="viewport" content="minimum-scale=0.5" />
Définir un zoom maximum de x2 :
  1. <meta name="viewport" content="maximum-scale=2" />
Il est possible de combiner les valeurs dans la balise viewport. Par exemple pour forcer l'affichage sans zoom et mettre le design sur toute la largeur il est possible d'utiliser le code suivant:
  1. <meta name="viewport" content="minimum-scale=1, maximum-scale=1, width=device-width" />
Partager :
Faire un lien :



Glossaire du webmaster