Vous tournez votre téléphone pour tester une écran, et l'agencement s'adapte soit de manière propre, soit il se décompose. Le texte se reflowe, 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 portrait ne constitue plus un terme de design et devient une décision de produit.
Si vous concevez 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 du développeur. Comment cela affecte la disposition, 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
- L'orientation paysage 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
- Pratiques de l'expérience utilisateur pour l'orientation de l'écran
Comprendre l'orientation portrait
Les utilisateurs remarquent l'orientation de l'écran lorsqu'il tourne. Les développeurs la remarquent lorsqu'elle brise leur interface.
L'orientation portrait signifie que le cadre est plus haut qu'il est large . C'est l'idée de base. Cela provient de l'art visuel, où les portraits de la face 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 la page d'orientation de Wikipedia.
Pour les constructeurs, la partie importante est que l'orientation 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 dans l'orientation portrait.
Pourquoi cela compte dans le travail de produit
L'orientation portrait est devenue un défaut pratique pour les appareils mobiles car l'utilisation verticale correspond à la façon dont les gens tiennent naturellement les téléphones. Cela affecte la navigation, la portée du pouce, la fluidité de lecture, la conception des formulaires et l'emplacement de la navigation.
A un feed, une vue d'article, un écran de paramètres ou un fil de discussion, il est généralement plus naturel de lire dans un cadre vertical. C'est une raison pour laquelle les choix d'orientation se connectent directement aux décisions d'expérience utilisateur de l'application mobile, et pas seulement à la mise en page visuelle. Les décisions d'expérience utilisateur de l'application mobile, et pas seulement à la mise en page visuelle.
Règle pratique : Traitez le portrait comme un contexte de mise en page, et pas seulement comme une position de dispositif.
Où les développeurs juniors se perdent souvent
La confusion habituelle est de mélanger l'orientation avec la résolution ou context : fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `alternatives_cta_questions`). Page/zone : page de comparaison des alternatives de mise à jour en direct de Capacitor. Rôle : Paragraphe marketing ou juridique long. Vu dans : page alternatives.astro. Conservez les termes de produit et de marque de Capgo ainsi que les termes de développeur exactement. Clé de message `alternatives_cta_questions` (Questions de CTA Alternatives). | Fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `appflow_cta_questions`). Page/zone : page de comparaison/migration de Appflow. Rôle : Paragraphe marketing ou juridique long. Vu dans : page ionic-appflow.astro. Conservez les termes de produit et de marque de Capgo ainsi que les termes de développeur exactement. Clé de message `appflow_cta_questions` (Questions de CTA Appflow). | Fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `capwesome_cta_questions`). Page/zone : page de comparaison de Capawesome. Rôle : Paragraphe marketing ou juridique long. Vu dans : page capwesome.astro. Conservez les termes de produit et de marque de Capgo ainsi que les termes de développeur exactement. Clé de message `capwesome_cta_questions` (Questions de CTA Capwesome). | Fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `consulting_faq_subtitle`). Page/zone : page de services de conseil. Rôle : Sous-titre ou slogan de section. Vu dans : page consulting.astro. Conservez les termes de produit et de marque de Capgo ainsi que les termes de développeur exactement. Clé de message `consulting_faq_subtitle` (Sous-titre FAQ de conseil). | Page/zone : page de comparaison/migration de Appflow. Rôle : Étiquette de navigation ou élément de navigation court. Vu dans : page ionic-appflow.astro, page ionic-enterprise-plugins.astro, page solutions/ionic-enterprise-plugins.astro. Clé de message `appflow_plugins_or` (Appflow Plugins Ou).. Ils sont liés, mais ce n'est pas la même chose.
- Orientation signifie laquelle des deux côtés est plus longue.
- 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 portrait et un téléphone en portrait 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 sensible doit 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. Un tableau de portrait concentre l'attention sur une personne ou un autre sujet de grande hauteur. Un tableau horizontal capture la largeur, le contexte et l'espace environnant. L'interface utilisateur fonctionne 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 largeurdonc les côtés les plus longs sont verticaux. 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 taille et à la structure verticale.
La différence dans une table
| Orientation | Forme | Meilleure correspondance | contexte : Page/zone : Capgo Builder / produit de construction native dans le cloud. Rôle : Étiquette de navigation ou élément de l'interface utilisateur court. Clé de message `native_build_builder_compare_fit_feature` (Native Build Builder Compare Fit Feature). |
|---|---|---|---|
| Effet typique | Portrait | Plus haut que large | L'attention est focalisée verticalement |
| Paysage | Plus large que haut | Vidéos, cartes, tableaux de bord, scènes larges | Montre plus de contexte horizontal |
Cela semble basique, mais c'est utile lorsque vous faites des compromis dans une évaluation de produit.
Qu'est-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 médias sociaux, les pages d'article, les étapes d'inscription et les interfaces de chat ont souvent l'air plus propres en portrait.
L'orientation horizontale fait l'opposé. Elle expose plus de largeur, ce qui aide avec les vues divisées, les calendriers, les galeries, la lecture de médias, les surfaces chargées en données et les 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 sur la concentration. Le paysage est généralement sur le contexte.
Qu'est-ce qui change pour le développeur
L'erreur la plus grande est de traiter la largeur plus grande comme une version étirée du portrait. Ce n'est pas le cas. L'héritage de l'information doit souvent changer.
Par exemple :
- En mode portrait, un tableau de bord peut empiler les cartes en une colonne unique.
- En mode orientation plus large, le même tableau de bord peut basculer vers plusieurs colonnes et révéler des filtres ou des panneaux latéraux.
- En mode portrait, un formulaire de paiement peut donner la priorité à de grandes cibles de clic et à un flux clair.
- En mode orientation plus large, cette même page peut paraître mal à l'aise si les champs deviennent trop comprimés verticalement.
Les développeurs travaillant sur des layouts mobiles immersifs doivent également se soucier de la gestion des bords, des zones de sécurité et du comportement écran plein. Si vous ajustez ces détails, Capacitor configuration d'écran é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
La disposition verticale se manifeste 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.
Photographie et impression
Un portrait professionnel est l'exemple évident. La mise en page verticale convient mieux à un visage et à un corps qu'une largeur de cadre ne le ferait.
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 le 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 le portrait est toujours meilleur. C'est parce que la page verticale convient bien pour la lecture de 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 vu la limite du portrait aussi. Certain contenu est mieux présenté dans un format horizontal. La clé est de correspondre la mise en page au structure du contenu.
Produits mobiles et flux d'applications
En ces circonstances, le portrait devient le modèle mental par défaut pour beaucoup d'équipes.
- Les applications de messagerie : les messages s'empilent verticalement.
- Les applications sociales : les publications, les commentaires et les vidéos sont consommés dans un flux en position verticale.
- Les applications de commerce : les résultats de recherche et les listes de produits glissent vers le bas.
- Les applications bancaires : les soldes, les transactions et les flux de confirmation sont généralement disposés en sections verticales.
Ces modèles ne sont pas des hasards. Le portrait permet l'utilisation d'une main, le défilement par le pouce et la réalisation de tâches linéaires.
Un grand nombre d'interfaces 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 portrait. Les visionneuses multimédia, 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, le portrait est généralement où les utilisateurs commencent.
Gérer l'orientation sur le Web
A un premier abord, un bug web commun semble petit. Votre application s'affiche proprement dans un viewport orienté vers le haut, puis l'utilisateur tourne le dispositif 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 liée à l'état. La forme du viewport a changé, et votre interface doit répondre de manière prévisible.
Pour les développeurs, cela signifie séparer deux tâches. Le CSS gère les changements de mise en page. Le JavaScript gère les changements de comportement. Si vous emballez le même projet pour un appareil mobile plus tard, ce niveau web compte toujours. En utilisant Capacitor pour convertir une application web en application mobile ne supprime pas la nécessité d'une bonne gestion de l'orientation web. Cela rend cette base encore plus importante.
La plateforme vous donne deux outils principaux. L'orientation de l'écran API expose le type et les événements de changement d'orientation, et le Manifeste de l'application web permet à une application installée de déclarer un mode préféré orienté vers le haut tel que portrait, portrait-primaryou portrait-secondary. La documentation de MDN décrit ces valeurs de manifeste dans sa référence d'orientation de l'application web Utilisez le CSS lorsque la mise en page doit s'adapter.
Commencez par le CSS. Il s'agit de la méthode la moins chère et la plus fiable pour répondre lorsque la largeur et la hauteur échangent de rôle.
Cela fonctionne comme une amélioration progressive de la forme de l'écran. Commencez par la mise en page étroite et orientée vers le haut par défaut. Ajoutez ensuite de l'espace pour les interfaces secondaires uniquement lorsque le viewport devient plus large.
/* 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;
}
}Une poignée de pratiques peuvent vous sauver du temps plus tard :
orientation
- Commencez par votre mode principal : Si les gens utilisent principalement l'application en position verticale, faites de celle-ci la disposition de base.
- Évitez les hauteurs fixes : La rotation d'un appareil peut réduire rapidement l'espace vertical utilisable, surtout lorsque l'interface du 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
Le CSS peut réorganiser les boîtes. Il ne peut pas décider quand reconstruire un graphique ou 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');
}
});Cette stratégie est utile pour les canaux, les contrôles multimédia, les vues de carte 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 s'en charger.
Une règle pratique aide les équipes junior à éviter une grande complexité. N'utilisez pas JavaScript pour imposer des décisions de mise en page que CSS gère déjà bien.
Fixez 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"
}Il s'agit d'une préférence, et non d'une substitution pour un 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 mieux car elle 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 cela crée également une erreur commune. Les équipes restreignent la rotation trop largement, et une application simple commence à se sentir rigide.
A good mental model helps here. App-wide settings are your default policy. Screen-level code is the exception layer. Use the policy for broad intent, and use the exception only where a rotating device would interfere with the job the user is trying to finish.
Contrôle de la plateforme native
Sur 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 au niveau supérieur. C'est simple, prévisible et facile à appliquer sur toute l'activité. Le compromis est la portée. Si seule une écran nécessite un mode portrait, appliquer cette règle globalement est généralement trop brutal.
On 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 autorise généralement, 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?”
Le contrôle programmé dans les applications Capacitor
Si vous construisez avec Capacitor, le contrôle dynamique est généralement réservé à code, près de la route ou de la vue qui en a besoin. Un écran de connexion peut être plus facile à utiliser en portrait. Un écran de médias ou un flux de 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 tuyaux natifs personnalisés. Le Capacitor screen orientation plugin for Capacitor apps vous permet de lire l'orientation actuelle, d'appliquer une restriction pour un mode spécifique comme le portrait, et de supprimer cette restriction lorsque l'utilisateur revient à un écran 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èl’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 fixe en position verticale lorsque la rotation perturberait l'entrée, l'alignement ou l'attention de l'utilisateur.
Exemples courants incluent :
- Écrans d'authentification : les entrées restent stables pendant que l'utilisateur tape.
- Étapes de paiement et de confirmation : moins de changements de disposition pendant des tâches à haute attention.
- Flux de travail en kiosque ou guidé : 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.
Exemples typiques incluent la lecture multimédia, les cartes, les jeux, les vues de la caméra et les écrans de données dense.
A useful rule for junior teams is simple. If changing device direction would only alter spacing, let the layout system handle it. If changing device direction would change how the task works, then screen-level orientation code may be justified.
Capgo est mentionné ici pour une raison pratique. Dans les Capacitor projets, le contrôle de l'orientation est l'une de ces fonctionnalités de plateforme qui commence comme un détail UI mineur 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
L'orientation de l'écran est une décision UX en premier lieu et une décision technique en deuxième lieu. Le code est généralement simple. La partie difficile est de choisir un comportement qui sent naturel.
Un petit checklist vous aide :
- Concevez pour le contexte dominant : si la plupart des utilisateurs commencent debout, faites du portrait la version la plus forte de l'interface.
- Supportez un mode de visualisation plus large où cela ajoute 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é pourrait 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 défilement 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 d'issues de zone de sécurité.
Pour des décisions de mise en page plus larges, des conseils de conception d'interface utilisateur et d'expérience utilisateur transversaux pour les applications Capacitor se marient bien avec la test de l'orientation car l'écran en question doit souvent ressembler à un écran natif sur différentes tailles d'appareils et des conventions de plateforme.
La principale prise de conscience est simple. Si vous demandez ce qu'est une orientation portrait, 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 envoyez des applications Capacitor et que vous avez besoin d'un comportement d'orientation contrôlé aux côtés de fixes rapides après la mise en production, Capgo est une bonne option. 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 vous aider lorsque vous avez besoin de bloquer ou d'activer des vues spécifiques sans avoir à revoir tout votre processus de mise en production.
