---
title: orientation
slug: conflicting/Web/CSS/@viewport_7861ca3461a359b150d44f2c8d74e53a
tags:
  - CSS
  - Descripteur
  - Reference
translation_of: Web/CSS/@viewport
translation_of_original: Web/CSS/@viewport/orientation
original_slug: Web/CSS/@viewport/orientation
---
<div>{{CSSRef}}</div>

<p>Le descripteur <strong><code>orientation</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir l'orientation d'un document.</p>

<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
orientation: auto;
orientation: portrait;
orientation: landscape;
</pre>

<p>Pour les agents utilisateurs et/ou les appareils pour lesquels l'orientation est modifiée en orientant l'appareil, l'auteur pourra utiliser ce descripteur afin d'inhiber le changement d'orientation lié à la stimulation physique.</p>

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

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>auto</code></dt>
 <dd>L'agent utilisateur déterminera l'orientation du document automatiquement. Généralement, il utilisera l'accéléromètre de l'appareil (si ce dernier en possède un) si le résultat de cette mesure n'est pas modifié par un réglage utilisateur (« bloquer la rotation de l'écran »).</dd>
 <dt><code>portrait</code></dt>
 <dd>Le document devrait être verrouillé en mode portrait.</dd>
 <dt><code>landscape</code></dt>
 <dd>Le document devrait être verrouillé en mode paysage.</dd>
</dl>

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

{{csssyntax}}

<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('CSS3 Device', '#the-lsquoorientationrsquo-descriptor', '"orientation" descriptor')}}</td>
   <td>{{Spec2('CSS3 Device')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

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

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