mozilla
Vos résultats de recherche

    @viewport

     

    Résumé

    La règle CSS @viewport contient un ensemble de descripteurs dans un bloc CSS délimité par des accolades. Ces descripteurs commandent les réglages du viewport, principalement sur les appareils mobiles.

    Syntaxe

    (Cet article de MDN est actuellement une ébauche et manque d'une description complète de la syntaxe).

    @viewport {
      /* descripteurs-viewport : valeur-viewport; */ 
    }

     

    Un facteur de zoom de 1.0 ou 100 % correspond au fait de ne pas zoomer. Les valeurs plus élevées zooment en avant. Les plus faibles zooment en arrière.

    Descripteurs

    Les navigateurs sont supposés ignorer les descripteurs non reconnus.

    min-width
    Utilisé dans la détermination de la largeur du viewport quand le document est le premier affiché.
    max-width
    Utilisé dans la détermination de la largeur du viewport quand le document est le premier affiché.
    width
    Un descripteur raccourci pour régler à la fois min-width et max-width
    min-height
    Utilisé dans la détermination de la hauteur du viewport quand le document est le premier affiché.
    max-height
    Utilisé dans la détermination de la hauteur du viewport quand le document est le premier affiché.
    height
    Un descripteur raccourci pour régler à la fois min-height et max-height
    zoom
    Indique le facteur de zoom initial.
    min-zoom
    Indique le facteur de zoom minimal.
    max-zoom
    Indique le facteur de zoom maximal.
    user-zoom
    Définit si l'utilisateur est autorisé à changer le facteur de zoom.
    orientation
    Contrôle l'orientation du document.

    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 Statut Commentaire
    CSS Device Adaptation
    La définition de '@viewport' dans cette spécification.
    Working Draft  

    Compatibilité des navigateurs

    Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support basique ? ? ? ? ?
    Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support basique ? ? ? ? [1] ? ?

    [1] Il y a un bogue dans Internet Explorer 10 sur les versions plus anciennes de Windows Phone 8, où device-width, lorsqu'il est utilisé dans @-ms-viewport , évalue la largeur de l'écran en pixels physiques plutôt qu'en pixels CSS , ce qui ne correspond pas aux spécifications. Cependant, quand il est utilisé avec la balise <meta> viewport, device-width est correct. Selon Microsoft, ce bogue a été corrigé dans Windows Phone 8 Update 3 (a.k.a. GDR3), bien qu'il y ait quelques retours sur la mise à jour du Lumia Black GDR3 qui n'a pas résolu le problème (au moins sur le Lumia 920). Pour plus de détails et une solution de contournement, regardez le blog de Tim Kadlec "Windows Phone 8 and Device-Width".

    Voir aussi

     

    Étiquettes et contributeurs liés au document

    Contributors to this page: louuis, Delapouite, teoli, Igro, FredB, J.DMB
    Dernière mise à jour par : J.DMB,