Orientation portrait : définition, exemples et CSS

Orientation portrait signifie que l'écran est plus haut que large (la hauteur est supérieure à la largeur). L'orientation paysage est l'inverse : plus large que haut. Les usages typiques en portrait incluent les flux mobiles, les articles, les formulaires et les chats. Le paysage convient aux vidéos, aux cartes et aux dashboards qui nécessitent de l'espace horizontal. Le ratio d'aspect (comme 9:16 en portrait ou 16:9 en paysage) décrit la relation entre la largeur et la hauteur ; l'orientation indique simplement quel côté est le plus long.

Exemple portrait vs paysage

Si vous avez cherché une image de l'orientation portrait, cette vue côte à côte illustre l'idée : un cadre vertical et un cadre horizontal sur la même classe d'appareil.

Le portrait concentre l’attention sur un défilement vertical. Le paysage expose davantage de colonnes et des interfaces côte à côte. Ce sont des contextes de mise en page, pas de simples étiquettes de rotation.

L’orientation n’est pas la même chose que la résolution ou le ratio d’aspect. Deux appareils peuvent tous deux être en mode portrait tout en utilisant des tailles de pixels et des ratios différents. Les mises en page responsives doivent se baser sur la forme de la fenêtre, et non sur un modèle de téléphone unique.

L'orientation portrait en CSS

Utilisez CSS lorsque la rotation doit modifier l’espacement ou la structure. La @media (orientation: portrait) query correspond aux fenêtres dont la hauteur est supérieure à la largeur. MDN documente cela sous caractéristiques média d’orientation.

/* Default: portrait-first single column */
.page {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.sidebar {
  display: none;
}

@media (orientation: landscape) {
  .page {
    grid-template-columns: 280px 1fr;
  }

  .sidebar {
    display: block;
  }
}

@media (orientation: portrait) {
  .hero {
    padding-block: 24px;
  }
}

Commencez par l’orientation que la plupart des utilisateurs voient en premier, puis ajoutez les règles pour le paysage. Évitez les hauteurs de viewport fixes qui cassent quand le clavier ou l’interface du navigateur apparaît. Testez les formulaires et les en-têtes sticky dans les deux orientations sur de vrais appareils.

Pour le JavaScript qui doit réagir à la rotation (graphiques, cartes, shells personnalisés), écoutez les screen.orientation événements de changement ou comparez window.innerHeight vers window.innerWidth. Gardez le layout en CSS lorsque c’est possible.

Verrouiller l'orientation dans les apps mobiles et les apps Capacitor

Browsers treat orientation lock as a preference. Native apps and Capacitor projets peuvent forcer l’orientation de l’écran par écran quand la rotation nuirait à la tâche (connexion, paiement, parcours kiosque).

Le @capgo/capacitor-screen-orientation Le plugin lit le mode actuel, verrouille le portrait pour une route et déverrouille quand l’utilisateur quitte cet écran. Voir le Documentation du plugin Screen Orientation pour plus de détails sur API.

import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';

await ScreenOrientation.lock({ orientation: 'portrait' });

const { type } = await ScreenOrientation.orientation();
console.log(type);

await ScreenOrientation.unlock();

Verrouillez avec parcimonie. Si la rotation ne modifie que l’espacement, adaptez plutôt la mise en page. Si vous verrouillez, lock et unlock au cycle de vie de la page pour que les écrans média et de réglages puissent toujours passer en paysage. Pour des patterns de mise en page plus généraux sur iOS et Android, consultez les bonnes pratiques UI et UX cross-platform pour les applications Capacitor.

FAQ

Qu'est-ce que l'orientation portrait ?

L'orientation portrait signifie que l'écran est plus haut que large. La hauteur est supérieure à la largeur, les bords longs sont donc verticaux. Les téléphones tenus à la verticale pour la lecture, le chat ou le défilement sont généralement en portrait.

Quelle est la différence entre les orientations portrait et paysage ?

Le portrait est plus haut que large. Le paysage est plus large que haut. Le même appareil bascule entre les deux lors d'une rotation, mais le ratio d'aspect et l'espace de mise en page changent : l'interface doit donc s'adapter plutôt que de simplement s'étirer.

Comment utiliser @media (orientation: portrait) en CSS ?

Ajoutez une media query avec @media (orientation: portrait) { ... } pour appliquer des styles lorsque la hauteur du viewport dépasse sa largeur. Associez-l’à des règles de mise en page pour le paysage à l’aide de @media (orientation: landscape) lorsque vous avez besoin des deux formats.

Que signifie changer d’orientation sur un téléphone ou une app ?

Changer d’orientation consiste à faire pivoter l’appareil ou à autoriser l’app à pivoter, afin que l’écran passe du portrait au paysage. Sur le web, les dimensions du viewport sont inversées. Dans les apps natives et Capacitor, le système d’exploitation peut également animer la transition et mettre à jour les zones de sécurité.

Qu’est-ce que l’orientation du contenu ?

L’orientation du contenu désigne la façon dont le contenu est disposé par rapport au cadre, et non seulement la manière dont l’appareil est tenu. Un écran en portrait peut toujours afficher un graphique large ou une vidéo avec des bandes noires. Adaptez la mise en page et les médias à la tâche, et non seulement à l’angle par défaut de l’appareil.

Pouvez-vous montrer un exemple de portrait vs paysage ?

Oui. Le portrait ressemble à un cadre de téléphone vertical où la hauteur est supérieure à la largeur. Le paysage ressemble à un cadre large où la largeur est supérieure à la hauteur. Faites défiler jusqu’au schéma sous Exemple portrait vs paysage pour une image légendée.

Si vous déployez des apps Capacitor et avez besoin d’un comportement d’orientation contrôlé en plus de correctifs rapides après la release, Capgo mérite le coup d’œil. Il fournit des live updates pour les applications CapacitorJS et Electron, et maintient aussi des plugins pour les fonctionnalités des apps, comme l’orientation de l’écran, ce qui peut aider quand vous devez verrouiller ou activer des vues spécifiques sans reconstruire tout votre processus de release.