@viewport

La règle @ @viewport contient un ensemble de descripteurs imbriqués dans un bloc CSS délimité par des accolades. Ces descripteurs permettent de définir des paramètres de la zone d'affichage (viewport), notamment sur les appareils mobiles.

Syntaxe

Descripteurs

Les navigateurs sont supposés ignorer les descripteurs non reconnus.

min-width: Ce descripteur détermine la largeur minimale de la zone d'affichage (viewport) lorsque le document est affiché initialement.
max-width: Ce descripteur détermine la largeur maximale de la zone d'affichage (viewport) lorsque le document est affiché initialement.
width: Ce descripteur est un raccourci qui permet de définir min-width et max-width
min-height: Ce descripteur détermine la hauteur minimale de la zone d'affichage (viewport) lorsque le document est affiché initialement.
max-height: Ce descripteur détermine la hauteur maximale de la zone d'affichage (viewport) lorsque le document est affiché initialement.
height: Ce descripteur est un raccourci qui permet de définir min-height et max-height
zoom: Ce descripteur permet de définir le niveau de zoom initial.
min-zoom: Ce descripteur permet de définir le niveau de zoom minimal.
max-zoom: Ce descripteur permet de définir le niveau de zoom maximal.
user-zoom: Ce descripteur indique si l'utilisateur peut, ou non, changer le niveau de zoom.
orientation: Ce descripteur contrôle l'orientation du document.

Note : Un facteur de zoom de 1.0 ou 100% correspond à une absence de zoom. Les valeurs supérieures traduiront une augmentation du niveau de zoom (agrandissement des images et du texte) et les valeurs inférieures correspondront à une réduction du niveau de zoom.

Syntaxe formelle

@viewport {
  <group-rule-body>
}

Exemples

@viewport {
  min-width: 640px;
  max-width: 800px;
}
@viewport {
  zoom: 0.75;
  min-zoom: 0.5;
  max-zoom: 0.9;
}
@viewport {
  orientation: landscape;
}

Spécifications

Spécification	État	Commentaires
CSS Device Adaptation La définition de '@viewport' dans cette spécification.	Version de travail	Définition initiale.

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Support simple	29 (via un marqueur) [4]	Pas de support [2]	10 -ms	11.10 Retiré avec la version 15 Réintroduit via une préférence avec la version 16	Pas de support [3]

Fonctionnalité	Android	Chrome pour Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Support simple	4.4	29	Pas de support [2]	10-ms[1]	11.10 Retiré avec la version 15 Réintroduit via une préférence avec la version 16	Pas de support [3]

[1] Il existe un bug pour IE Mobile 10 sur les versions antérieures à Windows Phone 8, où device-width, lorsqu'il est utilisé avec @-ms-viewport, prend la valeur de la largeur de l'écran, exprimée en pixels physiques, plutôt que la valeurs en pixels CSS (ce qui est incorrect selon la spécification). Toutefois, lorsqu'on l'utilise au sein de la balise viewport <meta>, device-width est évalué correctement. Selon Microsoft, ce bug a été corrigé avec Windows Phone 8 Update 3 (a.k.a. GDR3).

[2] Cf. bug 747754

[3] Cf. bug WebKit n°95959

[4] Cf. bug Chromium n°235457 : Activer @viewport sur l'ensemble des plateformes

Voir aussi

<meta> et plus précisément <meta name="viewport">
Utiliser la balise meta afin de contrôler la disposition sur les navigateurs mobiles