Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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).

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

Cette règle @ contient un ensemble de descripteurs CSS dans un bloc délimité par des accolades.

Un facteur de zoom de 1.0 ou de 100% signifie qu'il n'y a eu aucun zoom. Si la valeur est supérieure, cela signifie qu'on a zoomé pour agrandir le contenu. Inversement, si la valeur est inférieure à 1.0 ou à 100%, cela signifie qu'on a dézoomé.

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.
viewport-fit
Ce descripteur contrôle l'affichage du document pour les affichages non-rectangulaires.

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 Round Display Level 1
La définition de '@viewport' dans cette spécification.
Version de travail Définition du descripteur viewport-fit.
CSS Device Adaptation
La définition de '@viewport' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 29
Notes Désactivée
Support complet 29
Notes Désactivée
Notes See Chromium bug 235457.
Désactivée From version 29: this feature is behind the --enable-experimental-webkit-features runtime flag and the --enable-viewport runtime flag.
Edge Support complet Oui
Préfixée Désactivée
Support complet Oui
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Désactivée This feature is behind the Enable @-ms-viewport rules preference.
Firefox Aucun support Non
Notes
Aucun support Non
Notes
Notes See Firefox bug 747754.
IE Support complet 10
Préfixée
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Support complet 16
Désactivée
Support complet 16
Désactivée
Désactivée From version 16: this feature is behind the --enable-experimental-webkit-features runtime flag and the --enable-viewport runtime flag.
Aucun support 11.1 — 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Safari Aucun support Non
Notes
Aucun support Non
Notes
Notes See WebKit bug 95959.
WebView Android Support complet 4.4Chrome Android Support complet 29Edge Mobile Support complet Oui
Préfixée Désactivée
Support complet Oui
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Désactivée This feature is behind the Enable @-ms-viewport rules preference.
Firefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See Firefox bug 747754.
Opera Android ? Safari iOS Aucun support Non
Notes
Aucun support Non
Notes
Notes See WebKit bug 95959.
Samsung Internet Android Support complet Oui
height descriptorChrome Support complet 29Edge ? Firefox Aucun support NonIE Support complet 10
Préfixée
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Support complet 16
Support complet 16
Aucun support 11.1 — 15
Safari Aucun support NonWebView Android Support complet 4.4Chrome Android Support complet 29Edge Mobile ? Firefox Android Aucun support NonOpera Android Support complet 16
Support complet 16
Aucun support 11.1 — 14
Safari iOS Aucun support NonSamsung Internet Android Support complet Oui
max-height descriptorChrome Support complet 29Edge ? Firefox Aucun support NonIE Support complet 10
Préfixée
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Support complet 16
Support complet 16
Aucun support 11.1 — 15
Safari Aucun support NonWebView Android Support complet 4.4Chrome Android Support complet 29Edge Mobile ? Firefox Android Aucun support NonOpera Android Support complet 16
Support complet 16
Aucun support 11.1 — 14
Safari iOS Aucun support NonSamsung Internet Android Support complet Oui
max-width descriptorChrome Support complet 29Edge ? Firefox Aucun support NonIE Support complet 10
Préfixée
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Support complet 16
Support complet 16
Aucun support 11.1 — 15
Safari Aucun support NonWebView Android Support complet 4.4Chrome Android Support complet 29Edge Mobile ? Firefox Android Aucun support NonOpera Android Support complet 16
Support complet 16
Aucun support 11.1 — 14
Safari iOS Aucun support NonSamsung Internet Android Support complet Oui
max-zoom descriptorChrome Support complet 29Edge Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Firefox Aucun support NonIE Support complet 10
Préfixée
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera ? Safari Aucun support NonWebView Android ? Chrome Android Support complet 29Edge Mobile Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Firefox Android Aucun support NonOpera Android ? Safari iOS Aucun support NonSamsung Internet Android ?
min-height descriptorChrome Support complet 29Edge ? Firefox Aucun support NonIE Support complet 10
Préfixée
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Support complet 16
Support complet 16
Aucun support 11.1 — 15
Safari Aucun support NonWebView Android Support complet 4.4Chrome Android Support complet 29Edge Mobile ? Firefox Android Aucun support NonOpera Android Support complet 16
Support complet 16
Aucun support 11.1 — 14
Safari iOS Aucun support NonSamsung Internet Android Support complet Oui
min-width descriptorChrome Support complet 29Edge ? Firefox Aucun support NonIE Support complet 10
Préfixée
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Support complet 16
Support complet 16
Aucun support 11.1 — 15
Safari Aucun support NonWebView Android Support complet 4.4Chrome Android Support complet 29Edge Mobile ? Firefox Android Aucun support NonOpera Android ? Safari iOS Aucun support NonSamsung Internet Android Support complet Oui
min-zoom descriptorChrome Support complet 29Edge Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Firefox Aucun support NonIE Support complet 10
Préfixée
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera ? Safari Aucun support NonWebView Android ? Chrome Android Support complet 29Edge Mobile Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Firefox Android Aucun support NonOpera Android ? Safari iOS Aucun support NonSamsung Internet Android ?
orientation descriptor
Expérimentale
Chrome Aucun support NonEdge ? Firefox Aucun support NonIE Support complet 10
Préfixée
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Aucun support NonSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android Support complet 8
Préfixée
Support complet 8
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Safari iOS ? Samsung Internet Android Aucun support Non
user-zoom descriptorChrome Support complet 29Edge Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Firefox Aucun support NonIE Support complet 10
Préfixée
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera ? Safari Aucun support NonWebView Android ? Chrome Android Support complet 29Edge Mobile Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Firefox Android Aucun support NonOpera Android ? Safari iOS Aucun support NonSamsung Internet Android ?
viewport-fit descriptor
Expérimentale
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari Support complet 11WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS Support complet 11Samsung Internet Android ?
width descriptorChrome Support complet 29Edge ? Firefox Aucun support NonIE Support complet 10
Préfixée
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Support complet 16
Support complet 16
Aucun support 11.1 — 15
Safari Aucun support NonWebView Android Support complet 4.4Chrome Android Support complet 29Edge Mobile ? Firefox Android Aucun support NonOpera Android Support complet 16
Support complet 16
Aucun support 11.1 — 14
Safari iOS Aucun support NonSamsung Internet Android Support complet Oui
zoom descriptorChrome Support complet 29Edge ? Firefox Aucun support NonIE Support complet 10
Préfixée
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Support complet 16Safari Aucun support NonWebView Android Support complet 4.4Chrome Android Support complet 61Edge Mobile ? Firefox Android Aucun support NonOpera Android Support complet 37Safari iOS ? Samsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

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