La règle @ @viewport permet de configurer la zone d'affichage (le viewport en anglais) à travers laquelle le document est affiché. Cette règle est principalement utilisée pour les appareils mobiles mais aussi pour les navigateurs de bureau (par exemple Microsoft Edge qui gère la division de l'écran). Cette règle @ contient un ensemble de descripteurs CSS dans un bloc délimité par des accolades.

Les longueurs exprimées en pourcentages sont calculées de façon relative à la zone d'affichage initiale c'est-à-dire le viewport avant tout ajustement effectué par le navigateur ou par les styles de la page. Généralement, cela correspond à la taille de la fenêtre pour les navigateurs de bureau lorsqu'ils ne sont pas utilisés en mode plein écran.

Pour les appareils mobiles (ou pour les appareils de bureau qui sont en plein écran), la zone d'affichage initiale correspond à la portion de l'écran disponible pour l'application. Cela peut correspondre à l'écran entier ou bien à l'écran auquel on enlève les zones contrôlées par le système d'exploitation (par exemple la barre de tâche) ou bien encore à la zone de l'écran qui n'est pas occupée par le système d'exploitation ou d'autres applications.

@viewport {
  width: device-width;
}

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.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple291 2 Oui -ms- 3 Non410 -ms-

165

11.1 — 15 -o-

Non6
max-width descriptor29 ? Non10 -ms-

16

11.1 — 15

Non
min-width descriptor29 ? Non10 -ms-

16

11.1 — 15

Non
width descriptor29 ? Non10 -ms-

16

11.1 — 15

Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple4.429 Oui -ms- 3 Non4 ? Non6 ?
max-width descriptor4.429 ? Non

16

11.1 — 15

Non ?
min-width descriptor4.429 ? Non ? Non ?
width descriptor4.429 ? Non

16

11.1 — 15

Non ?

1. See Chromium bug 235457.

2. From version 29: this feature is behind the --enable-experimental-webkit-features runtime flag and the --enable-viewport runtime flag.

3. This feature is behind the Enable @-ms-viewport rules preference.

4. See Firefox bug 747754.

5. From version 16: this feature is behind the --enable-experimental-webkit-features runtime flag and the --enable-viewport runtime flag.

6. See WebKit bug 95959.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, fscholz, J.DMB, louuis, teoli, Igro, FredB, Delapouite
 Dernière mise à jour par : SphinxKnight,