Le descripteur max-width, rattaché à la règle @ @viewport, permet de définir la largeur maximale de la zone d'affichage (viewport) d'un document. Par défaut, la largeur maximale de la zone d'affichage correspond à celle du viewport initial.

En lien avec les règles @@viewport
Valeur initialeauto
Pourcentagesfait référence à la largeur de la zone d'affichage (viewport) initiale
Médiapour chaque propriété individuelle de la propriété raccourcie :
  • visual: Valeur introuvable dans la base de données
  • continuous: Valeur introuvable dans la base de données
Valeur calculéesi spécifié par une longueur, la valeur absolue correspondante; si spécifié par un pourcentage, la valeur telle que spécifiée; sinon, auto
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Avec un mot-clé */
max-width: auto;

/* Valeur de longueur */
/* Type <length>      */
max-width: 400px;
max-width: 50em;
max-width: 20cm;

/* Valeur proportionnelle */
/* Type <percentage>      */
max-width: 75%;

Valeurs

auto
La valeur utilisée est alors calculée selon les valeurs des autres descripteurs.
<length>
Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.
<percentage>
Une valeur de pourcentage relative à la largeur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.

Syntaxe formelle

<viewport-length>


<viewport-length> = auto | <length-percentage>


<length-percentage> = <length> | <percentage>

Exemples

@viewport {
  max-width: 600px;
}

Spécifications

Spécification État Commentaires
CSS Device Adaptation
La définition de '"max-width" descriptor' 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 pour iOSSamsung Internet
Support simpleChrome 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

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
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.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,