---
title: orientation
slug: Web/CSS/@viewport/orientation
tags:
  - CSS
  - Descripteur
  - Reference
translation_of: Web/CSS/@viewport
translation_of_original: 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>

<pre class="syntaxbox">{{csssyntax}}</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('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>

<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>

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