@viewport - Directive CSS
Résumé des caractéristiques de la directive @viewport
Description de la directive @viewport
.
@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;
}
Descripteurs utilisables avec @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 CSS 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
ouportrait
.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;
Prise en charge et compatibilité des navigateurs.
La directive @viewport
est obsolète. Les navigateurs ne la prennent plus en charge.
@viewport