Gérer l'orientation de l'écran
==============================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Sommaire
--------

L'orientation de l'écran est quelque chose de légèrement différent de l'orientation de l'appareil (en-US). Même si un appareil n'a pas la capacité de détecter sa propre orientation, un écran en possède toujours une. Et si on est capable de connaître son orientation, il est bon d'avoir la possibilité de contrôler l'orientation de l'écran afin de préserver ou d'adapter l'interface d'une application web.

Il y a plusieurs manières de gérer l'orientation de l'écran, à la fois avec CSS et JavaScript:

* La première est la media query orientation. Cela permet au contenu d'ajuster sa mise en forme à l'aide de CSS, selon que la fenêtre soit en mode paysage (c'est à dire que la largeur est plus grande que la hauteur) ou en mode portrait (que sa hauteur est plus grande que sa largeur).
* La deuxième est l'API JavaScript d'orientation d'écran, qui peut être utilisée pour récupérer l'orientation en cours de l'écran et éventuellement de la verrouiller.
Ajuster la mise en page selon l'orientation
-------------------------------------------

Un des cas d'utilisation les plus courants pour les changements d'orientation est quand vous souhaitez modifier la mise en page de votre contenu selon l'orientation de l'appareil. Par exemple, peut-être que vous voudriez qu'une barre d'outils s'étende le long de la dimension la plus longue de l'appareil. En utilisant une media query, vous pouvez le faire facilement et automatiquement.

Prenons pour exemple le code HTML suivant:


```html
<ul id="toolbar">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec
  sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt
  leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut
  interdum tristique dapibus. Nullam quis malesuada est.
</p>
```


Le CSS s'appuie sur une media query `orientation` pour gérer les styles spécifiques liés à l'orientation de l'écran.


```css
/\* D'abord, on définit les styles communs \*/

html,
body {
  width: 100%;
  height: 100%;
}

body {
  border: 1px solid black;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

p {
  font: 1em sans-serif;
  margin: 0;
  padding: 0.5em;
}

ul {
  list-style: none;

  font: 1em monospace;
  margin: 0;
  padding: 0.5em;

  -moz-box-sizing: border-box;
  box-sizing: border-box;

  background: black;
}

li {
  display: inline-block;
  margin: 0;
  padding: 0.5em;
  background: white;
}
```


Une fois qu'on a définit les styles communs, on peut définir des cas spéciaux selon l'orientation.


```css
/\* En mode portrait, on veut la barre d'outils en haut \*/

@media screen and (orientation: portrait) {
  #toolbar {
    width: 100%;
  }
}

/\* En mode paysage, on veut la barre d'outils à gauche \*/

@media screen and (orientation: landscape) {
  #toolbar {
    position: fixed;
    width: 2.65em;
    height: 100%;
  }

  p {
    margin-left: 2em;
  }

  li + li {
    margin-top: 0.5em;
  }
}
```


Et voici le résultat:

| Portrait | Landscape |
| --- | --- |
|  |  |

**Note :** La media query orientation s'applique en vérité selon l'orientation de la fenêtre du navigateur (ou iframe) et non l'orientation de l'appareil.

Verrouiller l'orientation de l'écran
------------------------------------

**Attention :** Cette API est expérimentale et est actuellement disponible sur Firefox OS et Firefox pour Android avec le préfixe `moz`, et sur Internet Explorer pour Windows 8.1 et plus avec le préfixe `ms`.

Certains appareils (principalement les appareils mobiles) peuvent changer dynamiquement d'orientation d'écran selon leur propre orientation, garantissant que l'utilisateur sera toujours capable de lire ce qu'il y a sur l'écran. Bien que ce comportement soit parfaitement adapté au contenu texte, certains contenus peuvent être affectés négativement par ce changement. Par exemple, les jeux basés sur l'orientation de l'appareil être gachés par un tel changement.

L'API Screen Orientation (orientation de l'écran) est faite pour empêcher ou gérer un tel changement.

### Écouter les changements d'orientation

L'événement `orientationchange` (en-US) est déclenché chaque fois que l'appareil change l'orientation de l'écran et l'orientation peut elle-même être lue avec la propriété `Screen.orientation` (en-US).


```js
screen.addEventListener("orientationchange", function () {
  console.log("The orientation of the screen is: " + screen.orientation);
});
```

### Empêcher le changement d'orientation

Toute application web peut verrouiller l'écran dans une orientation pour répondre à ses besoins. L'écran est verrouillé en utilisant la méthode `Screen.lockOrientation()` (en-US) et dévérouillé en utilisant `Screen.unlockOrientation()` (en-US).

`Screen.lockOrientation()` (en-US) accepte une chaîne de caractères (ou une série de chaînes de caractères) pour définir le type de verrouillage à appliquer. Les valeurs acceptées sont: `portrait-primary`, `portrait-secondary`, `landscape-primary`, `landscape-secondary`, `portrait`, `landscape` (Voir `Screen.lockOrientation` (en-US) pour en savoir plus sur ces valeurs).


```js
screen.lockOrientation("landscape");
```


**Note :** Un verrouillage d'écran est dépendant de l'application web. Si une a application A est verrouillée à `landscape` et l'application B est verrouillée à `portrait`, passer de l'application A à B ou à A ne va pas déclencher un événement `orientationchange` (en-US) parce que les deux applications gardent l'orientation qu'elles avaient.

En revanche, verrouiller l'orientation peut décléncher l'événement `orientationchange` (en-US) si l'orientation a dû être changée pour satisfaire aux critères du verrouillage.

Firefox OS et Android: Verrouiller l'orientation avec le manifeste
------------------------------------------------------------------

Pour Firefox OS et Firefox Android (bientôt pour la version bureau de Firefox également), vous pouvez le champ orientation dans le fichier manifeste de votre application, par exemple:


```json
"orientation": "portrait"
```

Voir aussi
----------

* `Screen.orientation` (en-US)
* `Screen.lockOrientation()` (en-US)
* `Screen.unlockOrientation()` (en-US)
* `Screen.onorientationchange` (en-US)
* Media query orientation
* A short introduction to media queries in Firefox 3.5