@viewport - Directive CSS

@viewport

Résumé des caractéristiques de la directive `@viewport`

Description rapide

Définit les caractéristiques de la fenêtre d'affichage. Cette directive est une alternative à la balise HTML meta du même nom.

Statut

Obsolète ✗

Module W3C

Module CSS - Adaptation du terminal

Description de la directive `@viewport`.

✗

La directive @viewport a été retirée de la norme. Il ne faut pas l'utiliser. Préférer à la place la directive @media.

@viewport est une alternative CSS à la balise HTML metea name="viewport" .... La directive @viewport permet de définir la fenêtre d'affichage dans laquelle la page sera affichée, sur un terminal mobile. Très peu reconnue et prise en charge par les navigateurs, on utilisera @viewport avec précaution.

Exemple de syntaxe :


	@viewport {
	   min-width: 320px;
	   min-height: 600px;
	   zoom: 1;
	}

Syntaxes de la directive `@viewport`.

min-width: 320px; max-width: 600px; min-height: 500px; max-height: 800px;

Largeur minimale et largeur maximale du viewport.
Hauteur minimale et hauteur maximale du viewport.

Les valeurs affectées peuvent être exprimées dans une des unités de dimension ou en pourcentages (voir les unités de dimension. La valeur auto est également acceptée.
width: 300px 600px; height: 400px 800px;

Ces deux descripteurs sont des raccourcis qui permettent de définir en une seule écriture la valeur minimale et la valeur maximale.
min-zoom: 0.8; max-zoom: 1.2;

Valeur minimale et valeur maximale du zoom. L'utilisateur ne pourra pas zoomer ou dézommer l'écran au delà de ces valeurs.

Les valeurs affectées à ces deux descipteurs peuvent être auto, un nombre supérieur à zéro, sans unité, ou un pourcentage.
zoom: 2;

Définit la valeur initiale du zoom.

La valeur peut être un nombre supérieur à zéro, sans unité, un pourcentage, ou la valeur auto.
user-zoom: fixed;

Définit si l'utilisateur peut modifier la valeur du zoom. De façon générale, il n'est pas recommandé d'empêcher l'utilisateur de zoomer ou dézoomer : cela peut constituer une gêne pour une personne malvoyante, cela réduit donc l'accessibilité.

La valeur affectée à user-zoom peut être l'une de ces deux valeurs :
- fixed : l'utilisateur ne peut pas changer le zoom initial.
- zoom : l'utilisateur peut zoomer ou désommer.
orientation: portrait;

Définit l'orientation. Peut prendre les valeurs landscape ou portrait.

La valeur affectée à user-zoom peut être l'une de ces trois valeurs :
- auto : le navigateur choisit l'orientation la plus adaptée. Sur un terminal mobile, ce choix peut évoluer en fonction de la façon dont le terminal est positionné.
- portrait : une présentation en vertical est imposée.
- landscape : une présentation horizontale est imposée.
viewport-fit: auto;

Ce descripteur est utile pour adapter la taille du viewport à la taille de l'écran lorsque ce dernier est de forme arrondie, comme par exemple sur une montre.

Les valeurs possibles sont :
- auto : le dimensionnement du viewport est décidé par le navigateur.
- contain : la totalité du viewport est visible sur l'écran arrondi. Ce qui conduit à créer des marges inutilisées.
- cover : la taille du viewport est fixée à la taille de l'écran physique, ce qui veut dire qu'une partie du viewport ne sera pas visible, dans les arrondis de l'écran.
viewport-fit: contain;

viewport-fit: cover;