---
title: '@viewport'
slug: Web/CSS/@viewport
tags:
  - CSS
  - Experimental
  - Reference
  - Règle @
translation_of: Web/CSS/@viewport
---
<div>{{SeeCompatTable}}{{CSSRef}}</div>

<p>La règle @<strong> <code>@viewport</code></strong> permet de configurer la zone d'affichage (le <em>viewport</em> 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).</p>

<p>Les longueurs exprimées en pourcentages sont calculées de façon relative à la <strong>zone d'affichage initiale</strong> c'est-à-dire le <em>viewport</em> 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.</p>

<p>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.</p>

<pre class="brush: css no-line-numbers">@viewport {
  width: device-width;
}</pre>

<h2 id="Syntaxe">Syntaxe</h2>

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

<p>Un facteur de zoom de <code>1.0</code> ou de <code>100%</code> 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 à <code>1.0</code> ou à <code>100%</code>, cela signifie qu'on a dézoomé.</p>

<h3 id="Descripteurs">Descripteurs</h3>

<p>Les navigateurs sont supposés ignorer les descripteurs non reconnus.</p>

<dl>
 <dt>{{cssxref("@viewport/min-width","min-width")}}</dt>
 <dd>Ce descripteur détermine la largeur minimale de la zone d'affichage (<em>viewport</em>) lorsque le document est affiché initialement.</dd>
 <dt>{{cssxref("@viewport/max-width","max-width")}}</dt>
 <dd>Ce descripteur détermine la largeur maximale de la zone d'affichage (<em>viewport</em>) lorsque le document est affiché initialement.</dd>
 <dt>{{cssxref("@viewport/width","width")}}</dt>
 <dd>Ce descripteur est un raccourci qui permet de définir <code>min-width</code> et <code>max-width</code>.</dd>
 <dt>{{cssxref("@viewport/min-height","min-height")}}</dt>
 <dd>Ce descripteur détermine la hauteur minimale de la zone d'affichage (<em>viewport</em>) lorsque le document est affiché initialement.</dd>
 <dt>{{cssxref("@viewport/max-height","max-height")}}</dt>
 <dd>Ce descripteur détermine la hauteur maximale de la zone d'affichage (<em>viewport</em>) lorsque le document est affiché initialement.</dd>
 <dt>{{cssxref("@viewport/height","height")}}</dt>
 <dd>Ce descripteur est un raccourci qui permet de définir <code>min-height</code> et <code>max-height</code>.</dd>
 <dt>{{cssxref("@viewport/zoom","zoom")}}</dt>
 <dd>Ce descripteur permet de définir le niveau de zoom initial.</dd>
 <dt>{{cssxref("@viewport/min-zoom","min-zoom")}}</dt>
 <dd>Ce descripteur permet de définir le niveau de zoom minimal.</dd>
 <dt>{{cssxref("@viewport/max-zoom","max-zoom")}}</dt>
 <dd>Ce descripteur permet de définir le niveau de zoom maximal.</dd>
 <dt>{{cssxref("@viewport/user-zoom","user-zoom")}}</dt>
 <dd>Ce descripteur indique si l'utilisateur peut, ou non, changer le niveau de zoom.</dd>
 <dt>{{cssxref("@viewport/orientation","orientation")}}</dt>
 <dd>Ce descripteur contrôle l'orientation du document.</dd>
 <dt>{{cssxref("@viewport/ viewport-fit", "viewport-fit")}}</dt>
 <dd>Ce descripteur contrôle l'affichage du document pour les affichages non-rectangulaires.</dd>
</dl>

<div class="note">
<p><strong>Note : </strong>Un facteur de zoom de <code>1.0</code> ou <code>100%</code> 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.</p>
</div>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

{{csssyntax}}

<h2 id="Exemples">Exemples</h2>

<pre class="brush: css">@viewport {
  min-width: 640px;
  max-width: 800px;
}

@viewport {
  zoom: 0.75;
  min-zoom: 0.5;
  max-zoom: 0.9;
}

@viewport {
  orientation: landscape;
}</pre>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS Round Display", "#extending-viewport-rule", "@viewport")}}</td>
   <td>{{Spec2("CSS Round Display")}}</td>
   <td>Définition du descripteur {{cssxref("@viewport/viewport-fit", "viewport-fit")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}</td>
   <td>{{Spec2('CSS3 Device')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("css.at-rules.viewport")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{HTMLElement("meta")}} et plus précisément <code>&lt;meta name="viewport"&gt;</code></li>
 <li><a href="/fr/docs/Mozilla/Mobile/Balise_meta_viewport">Utiliser la balise <code>meta</code> afin de contrôler la disposition sur les navigateurs mobiles</a></li>
</ul>