Vous tournez votre téléphone pour tester une écran, et l'agencement s'adapte soit de manière propre, soit se décompose. Le texte se reformatte, les boutons sautent, une fenêtre modale couvre soudainement la mauvaise zone, ou votre lecteur vidéo se comporte exactement comme prévu. Ce petit moment est là où orientation paysage arrête d'être un terme de design et devient une décision de produit.
Si vous construisez pour les appareils mobiles, vous avez besoin d'une réponse claire à qu'est-ce qu'une orientation paysage. Pas seulement la définition de classe, mais la version développeur. Comment cela affecte l'agencement, quand supporter la rotation, quand le bloquer, et comment le gérer dans les applications web, les applications natives, et les Capacitor projets sans créer une expérience utilisateur fragile.
Table des matières
- Comprendre l'orientation paysage
- Portrait vs Paysage : Une Comparaison Fondamentale
- Utilisations courantes dans différents médias
- Gestion de l'orientation sur le Web
- Gestion de l'orientation dans les applications mobiles
- Meilleures pratiques UX pour l'orientation d'écran
Comprendre l'orientation portrait
Les utilisateurs remarquent l'orientation pour la première fois lorsqu'un écran tourne. Les développeurs la remarquent lorsqu'elle brise leur interface.
Orientation portrait signifie que le cadre est plus haut qu'il est large. C'est l'idée de base. Cela vient de l'art visuel, où les portraits du visage et du haut du corps d'une personne étaient généralement encadrés verticalement. Cette même idée s'est étendue à la conception de pages, à la photographie et aux interfaces numériques. Une bonne référence pour cette histoire plus large est Vue d'orientation de la page Wikipedia.
Pour les constructeurs, la partie importante est que l'orientation en portrait n'est pas liée à une taille d'écran, un appareil ou un format de fichier. Il s'agit d'une règle sur la forme. Si la hauteur est supérieure à la largeur, vous êtes en portrait.
Pourquoi cela compte dans le travail de produit
L'orientation en portrait est devenue un choix pratique pour les appareils mobiles car l'utilisation verticale correspond à la façon dont les gens tiennent naturellement leurs téléphones. Cela affecte la navigation, la portée du doigt, la lecture, la conception de formulaire et la disposition de la navigation.
Une liste de flux, une vue d'article, une page de paramètres ou un fil de discussion se lit généralement plus naturellement dans un cadre vertical. C'est une raison pour laquelle les choix d'orientation se connectent directement aux décisions d'expérience utilisateur des applications mobileset non seulement à la mise en forme visuelle.
Règle pratique : Traitez l'orientation en portrait comme un contexte de mise en page et non seulement comme une position d'appareil.
L'endroit où les développeurs juniors se perdent souvent
La confusion habituelle est de mélanger l'orientation avec résolution ou rapport d'aspectIls sont liés, mais ce n'est pas la même chose.
- Orientation signifie laquelle des côtés est plus long.
- Résolution signifie combien de pixels existent dans chaque dimension.
- Rapport d'aspect décrit la relation entre la largeur et la hauteur.
Un tablette en paysage et un téléphone en paysage peuvent avoir des dimensions très différentes, mais ils partagent toujours le même état d'orientation. C'est pourquoi la logique de l'interface utilisateur réactive devrait demander : « Est-ce que la hauteur est supérieure à la largeur ? » avant de demander quoi que ce soit de plus spécifique.
Portrait vs Paysage : Une Comparaison Fondamentale
Une façon simple de penser à cela est à travers la composition. Une peinture de portrait concentre l'attention sur une personne ou un autre sujet de grande hauteur. Une peinture horizontale capture la largeur, le contexte et l'espace environnant. Les interfaces utilisateur fonctionnent de la même manière.
Dans l'imagerie et la conception d'interface utilisateur, l'orientation portrait est le rectangle où la hauteur dépasse la largeur, donc les longues arêtes sont verticales. C'est l'inverse de l'orientation horizontale. L'entrée du glossaire de SLR Lounge décrit cette définition technique et pourquoi la forme convient aux sujets de grande hauteur et à la structure verticale.
La différence dans une table
| Orientation | Forme | Meilleure correspondance | Effet typique |
|---|---|---|---|
| Portrait | Plus haut que large | Alimentation, formulaires, lecture, sujets de grande hauteur | Concentre l'attention verticalement |
| Paysage | Plus large que haut | Vidéo, cartes, tableaux de bord, scènes larges | Montre plus de contexte horizontal |
Cela ressemble à des bases, mais c'est utile lorsque vous faites des compromis dans une revue de produit.
Ce qui change pour l'utilisateur
Le portrait réduit généralement l'attention. Il réduit le contenu latéral et encourage un flux de haut en bas. C'est pourquoi les flux de réseaux sociaux, les pages d'articles, les étapes d'inscription et les interfaces de chat ont souvent l'air plus propres en portrait.
L'orientation horizontale fait le contraire. Elle expose plus de largeur, ce qui aide aux vues divisées, aux calendriers, aux galeries, à la lecture multimédia, aux surfaces chargées de données et aux vues immersives. Si votre disposition nécessite une comparaison côte à côte, ce format horizontal vous donne souvent plus d'espace.
Le portrait est généralement axé sur l'accent mis sur l'élément. Le paysage est généralement axé sur le contexte.
Quels changements pour le développeur
L'erreur la plus grande est de considérer le format plus large comme une version étirée du portrait. Ce n'est pas le cas. La hiérarchie des informations doit souvent changer.
Par exemple :
- Dans le portraitun tableau de bord peut empiler des cartes en une colonne unique.
- Dans une orientation plus largele même tableau de bord pourrait passer à plusieurs colonnes et révéler des filtres ou des panneaux latéraux.
- Dans le portraitun formulaire de paiement peut donner la priorité à de grands cibles de clic et à un flux clair.
- Dans une orientation plus largeSi les champs deviennent trop comprimés verticalement, la même écran peut ressentir mal.
Les développeurs travaillant sur des layouts mobiles immersifs ont également besoin de réfléchir à la gestion des bords, aux zones de sécurité et au comportement écran plein. Si vous ajustez ces détails, Capacitor configuration d'affichage écran à écran fait partie de la même conversation car les changements d'orientation affectent la perception des utilisateurs de l'espace disponible.
Utilisations courantes dans différents médias
L'orientation portrait se produit dans plus de lieux que les écrans mobiles. Cela compte car le concept n'a pas commencé dans le logiciel, et il ne s'agit pas uniquement du logiciel.
La photographie et l'impression
Un portrait professionnel est l'exemple évident. La frame verticale convient mieux à la face et au corps d'une personne qu'une large frame ne le ferait pas. La même logique s'applique aux photos de mode, aux couvertures de livres, aux affiches et aux couvertures de magazines.
La conception d'impression repose également sur l'orientation portrait lorsque l'expérience de lecture doit se déplacer de haut en bas dans une colonne étroite. Cette forme aide l'œil à voyager naturellement vers le bas de la page.
Documents et communication quotidienne
La plupart des rapports, des CV, des lettres et des documents internes sont conçus en portrait. C'est pas parce que portrait est toujours meilleur. C'est parce que une page verticale fonctionne bien pour les séquences de paragraphes, de titres, de listes et de signatures.
Si vous avez déjà exporté un PDF et remarqué que une table large devient soudainement illisible, vous avez atteint la limite du portrait aussi. Certaines contenus sont mieux présentés sous un format horizontal. La clé est de correspondre la mise en page à la structure du contenu.
Produits mobiles et flux d'applications
Dans ces circonstances, le portrait devient le modèle mental par défaut pour beaucoup d'équipes.
Pensez aux écrans que les utilisateurs ouvrent régulièrement :
- Applications de messagerie : les messages s'empilent verticalement.
- Applications sociales : les publications, les commentaires et les vidéos sont consommés dans un flux vertical.
- Applications de commerce : les résultats de recherche et les listes de produits glissent vers le bas.
- Applications bancaires : les soldes, les transactions et les flux de confirmation sont généralement organisés en sections verticales.
Ceux-ci ne sont pas des accidents. Portrait prend en charge l'utilisation d'une main, le défilement par le pouce et la tâche de complétion linéaire.
Un grand nombre d'interfaces utilisateur mobiles ressentent intuitivement parce que l'interface suppose un appareil en position verticale avant de supposer quoi que ce soit d'autre.
Cela ne signifie pas que chaque écran doit rester en position verticale. Les lecteurs multimédias, les cartes, les grands graphiques et les workflows basés sur la caméra bénéficient souvent d'une mise en page plus large. Mais pour les flux de tâches quotidiens, la position verticale est généralement où les utilisateurs commencent.
Gestion de l'orientation sur le Web
Un bug web courant peut sembler petit au début. Votre application est lisible dans un viewport en position verticale, puis l'utilisateur tourne l'appareil et le graphique déborde, le côté-barre apparaît à la mauvaise rupture, ou le clavier recouvre le bouton de soumission. L'orientation sur le web est vraiment à propos de l'état. La forme du viewport a changé, et votre UI doit répondre de manière prévisible.
Pour les développeurs, cela signifie séparer deux tâches. CSS gère les changements de mise en page. JavaScript gère les changements de comportement. Si vous emballez le même projet pour les appareils mobiles plus tard, cette couche web compte toujours. Utiliser Capacitor pour transformer une application web en application mobile ne supprime pas la nécessité d'une bonne gestion de l'orientation web. Cela rend cette base plus importante.
La plateforme vous donne deux outils principaux. L'orientation d'écran API expose le type d'orientation et les événements de changement, et le manifeste de l'application web permet à une application installée de déclarer un mode préféré en position verticale tel que portrait, portrait-primaryou portrait-secondary. La documentation de MDN décrit ces valeurs de manifeste dans sa référence sur l'orientation de l'application web Handling Orientation on the Web.
Utilisez CSS lorsque le layout doit s'adapter
Commencez par CSS. C'est la méthode la moins chère et la plus fiable pour répondre lorsque la largeur et la hauteur échangent de rôle.
/* Default portrait-friendly layout */
.page {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.sidebar {
display: none;
}
@media (orientation: landscape) {
.page {
grid-template-columns: 280px 1fr;
}
.sidebar {
display: block;
}
}Cela fonctionne comme une amélioration progressive de la forme d'écran. Commencez par le layout étroit, vertical comme défaut. Ajoutez ensuite de l'espace pour les éléments secondaires UI uniquement lorsque la vue devient plus large.
Un certain nombre de pratiques économisent du temps plus tard :
- Commencez par votre mode principal : si les gens utilisent principalement l'application en position verticale, faites de celle-ci la base du layout.
- Évitez les hauteurs fixes : la rotation d'un appareil peut réduire rapidement l'espace vertical utilisable, surtout lorsque l'interface de navigateur ou un clavier virtuel est visible.
- Testez les états d'interaction réels : les formulaires, les en-têtes collés et les feuilles de bas de page échouent souvent lors de la rotation, pas dans les captures d'écran statiques.
Utilisez JavaScript lorsque le comportement doit réagir
CSS peut réorganiser des boîtes. Il ne peut pas décider de reconstruire un graphique ou de réinitialiser un gestionnaire de gestes.
Utilisez JavaScript lorsque les changements d'orientation affectent l'interface utilisateur étatique.
function logOrientation() {
const type = screen.orientation?.type;
console.log('Current orientation:', type);
}
logOrientation();
screen.orientation?.addEventListener('change', () => {
logOrientation();
const isPortrait = window.innerHeight > window.innerWidth;
if (isPortrait) {
document.body.classList.remove('wide-mode');
} else {
document.body.classList.add('wide-mode');
}
});Ce modèle est utile pour les canaux, les contrôles de médias, les vues de cartes et les coques de navigation personnalisées. Le modèle mental est simple. Si la rotation change la présentation des données ou la logique d'interaction, JavaScript doit répondre. Si la rotation ne change que l'espacement ou la disposition, CSS doit le gérer.
Une règle pratique aide les équipes junior à éviter une grande complexité. N'utilisez pas JavaScript pour forcer les décisions de mise en page que CSS gère bien déjà.
Définissez une orientation préférée pour les PWAs
Si votre PWA est conçue principalement pour une utilisation verticale, déclarez-le dans le manifeste.
{
"name": "My App",
"short_name": "MyApp",
"display": "standalone",
"orientation": "portrait"
}C'est une préférence et non un substitut du design réactif. Cela aide le navigateur à comprendre comment l'application installée devrait s'ouvrir et se comporter dans les contextes pris en charge.
Vous pouvez également demander un verrouillage d'orientation en temps de exécution lorsque le navigateur le permet :
async function lockPortrait() {
try {
await screen.orientation.lock('portrait');
console.log('Orientation locked');
} catch (err) {
console.log('Lock failed:', err);
}
}Utilisez cela avec soin. Une bonne règle est de verrouiller uniquement lorsque la rotation briserait la tâche elle-même, comme un flux de capture guidée ou une écran avec des exigences d'alignement physique strictes. Dans la plupart des autres cas, adapter l'interface est le choix de conception plus approprié car il respecte à la fois l'appareil et l'utilisateur.
Gestion de l'orientation dans les applications mobiles
Les applications mobiles peuvent faire plus qu'une fenêtre de navigateur. Elles peuvent déclarer une direction d'écran par défaut au niveau de l'application, puis changer de comportement pour une seule écran lorsque la tâche le demande. Cette contrôle supplémentaire est utile, mais elle crée également une erreur commune. Les équipes restreignent trop largement la rotation et une application simple commence à se sentir rigide.
Un bon modèle mental est utile ici. Les paramètres de l'application par défaut sont votre politique par défaut. L'écran code est la couche exceptionnelle. Utilisez la politique pour une intention large, et utilisez l'exception uniquement là où un appareil rotatif interférerait avec la tâche que l'utilisateur essaie de terminer.
Contrôle de la plateforme native
Actif Android, l'orientation est souvent définie dans AndroidManifest.xml pour une activité :
<activity
android:name=".MainActivity"
android:screenOrientation="portrait" />Cela fonctionne comme un drapeau de configuration de niveau supérieur. Il est simple, prévisible et facile à appliquer sur toute l'activité. Le compromis est la portée. Si seulement une seule écran nécessite un mode en position debout, appliquer cette règle globalement est généralement trop brutal.
Actif iOS, les orientations prises en charge sont définies dans Xcode à travers les paramètres de cible et les métadonnées de l'application. Vous pouvez définir ce que l'application supporte en général, puis affiner le comportement dans les contrôleurs de vue spécifiques lorsque l'écran a des exigences plus strictes.
That split matters for cross-platform teams. Native config answers, “What should this app generally allow?” Runtime code answers, “What should this screen do right now?”
Contrôle programmé dans les applications Capacitor
Si vous construisez avec Capacitor, le contrôle dynamique est généralement situé dans code, près de la route ou de la vue qui en a besoin. Une page de connexion peut être plus facile à utiliser en mode paysage. Une page de flux de médias ou une caméra peut nécessiter la rotation en fonction de la façon dont l'appareil est tenu.
Un plugin garde cette logique lisible et évite les canalisations natives personnalisées. Capacitor screen orientation plugin for Capacitor apps vous permet de lire la orientation actuelle, d'appliquer une restriction pour un mode spécifique comme le portrait, et de supprimer cette restriction lorsque l'utilisateur revient sur une page flexible.
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
async function lockLoginScreen() {
await ScreenOrientation.lock({ orientation: 'portrait' });
}
async function unlockForMedia() {
await ScreenOrientation.unlock();
}
async function checkCurrentOrientation() {
const result = await ScreenOrientation.orientation();
console.log(result);
}Le modèle est simple. Appliquez la restriction lorsque l'écran devient actif. Supprimez-la lorsque l'écran n'est plus actif. Dans une application basée sur un routeur, cela signifie souvent lier les changements d'orientation aux appels de cycle de vie de page plutôt que de disperser les appels dans des composants aléatoires.
Choisissez les restrictions d'écran avec soin
Utilisez un mode droit fixe lorsque la rotation perturberait l'entrée, l'alignement ou l'attention de l'utilisateur.
Exemples courants incluent :
- Les écrans de connexion : les champs d'entrée restent stables pendant que l'utilisateur tape.
- Les étapes de paiement et de confirmation : moins de changements de disposition pendant les tâches d'attention élevée.
- Kiosque ou flux guidés : l'interface nécessite une présentation cohérente.
Laissez le dispositif tourner librement lorsque la largeur supplémentaire ou une prise de main différente aide clairement à la tâche.
Des exemples typiques incluent la lecture multimédia, les cartes, les jeux, les vues de la caméra et les écrans de données dense.
Une règle utile pour les équipes junior est simple. Si le changement de direction du dispositif n'aurait que pour effet de modifier l'espacement, laissez le système de disposition s'en charger. Si le changement de direction du dispositif changerait la façon dont la tâche fonctionne, alors l'orientation d'écran code peut être justifiée.
Capgo est mentionné ici pour une raison pratique. Dans les projets Capacitor , le contrôle de l'orientation est l'un de ces fonctionnalités de plateforme qui commence comme un détail de l'interface et devient rapidement un comportement de l'application. Traitez-le comme un comportement. Gardez la disposition flexible par défaut, appliquez des restrictions avec parcimonie et supprimez-les dès que l'écran n'en a plus besoin.
Meilleures pratiques UX pour l'orientation de l'écran
La gestion de l'orientation est une décision UX en premier lieu et une décision technique en second lieu. Le code est généralement simple. La partie difficile est de choisir un comportement qui se sent naturel.
Un court checklist aide :
- Concevez pour le contexte dominant : si la plupart des utilisateurs commencent debout, faites du portrait la version la plus forte de l'interface.
- Supporte un mode d'affichage plus large où cela apporte de la valeur : ne bloquez pas la rotation sur les écrans qui bénéficient d'une largeur supplémentaire.
- Verrouillez uniquement avec une raison claire : un formulaire, un paiement ou un flux sécurisé peuvent justifier cela. Une page de contenu ne le fera généralement pas.
- Préservez l'état pendant la rotation : les utilisateurs ne devraient pas perdre leur saisie, leur position de roulage ou leurs onglets sélectionnés.
- Testez les deux orientations sur des appareils réels : les simulateurs manquent de transitions maladroites, de chevauchement de clavier et de problèmes de zone de sécurité.
Pour les décisions de mise en page plus larges, la guidance de l'interface utilisateur et de l'expérience utilisateur cross-plateforme pour les applications Capacitor s'adapte bien à la test de l'orientation car la même page doit souvent se sentir native sur différentes tailles d'appareil et des conventions de plateforme.
La principale prise de conscience est simple. Si vous demandez ce qu'est une orientation paysage, la réponse n'est pas seulement « vertical ». C'est une règle de cadre, un état de mise en page et une attente de l'utilisateur. Les bonnes applications traitent ainsi.
Si vous expédiez des applications Capacitor et avez besoin d'un comportement d'orientation contrôlée en plus de correctifs rapides après la mise en production, Capgo vaut la peine d'y jeter un coup d'œil. Il fournit des mises à jour en temps réel pour les applications CapacitorJS et Electron, et il maintient également des plugins pour les capacités d'application telles que l'orientation de l'écran, qui peuvent aider lorsque vous avez besoin de verrouiller ou d'activer des vues spécifiques sans devoir reconstruire tout votre processus de mise en production.
