Vous tournez votre téléphone pour tester une écran, et l'agencement s'adapte soit proprement, soit se décompose. Le texte reflowe, les boutons sautent, une boîte de dialogue couvre soudainement la mauvaise zone, ou votre lecteur vidéo se comporte exactement comme prévu. Ce petit moment est là où portrait orientation ne constitue plus un terme de design et devient une décision de produit.
Si vous concevez pour mobile, vous avez besoin d'une réponse claire à qu'est-ce qu'une orientation portrait. Pas seulement la définition de classe, mais la version 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 Capacitor projets sans créer une expérience utilisateur fragile.
Table des matières
- Comprendre l'orientation portrait
- 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
- Pratiques de l'expérience utilisateur pour l'orientation de l'écran
Comprendre l'orientation portrait
Les utilisateurs remarquent l'orientation pour la première fois lorsqu'un écran se 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. Voilà l'idée centrale. 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 en orientation portrait.
Pourquoi cela compte dans le travail de produit
L'orientation portrait est devenue un choix pratique par défaut pour les appareils mobiles car l'utilisation debout correspond à la façon dont les gens tiennent naturellement les téléphones. Cela affecte la navigation, la portée du pouce, la lecture, la conception des formulaires et la disposition de la navigation.
A un feed, une vue d'article, une page 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 sont directement liés aux décisions d'expérience utilisateur des applications mobiles, et pas seulement à la mise en page visuelle. Les décisions d'expérience utilisateur des applications mobiles sont directement liées aux choix d'orientation, et pas seulement à la mise en page visuelle.La règle pratique est la suivante :
Considérez le portrait comme un contexte de mise en page, et pas seulement comme une position de dispositif. Les débutants dans le développement sont souvent confus.
La confusion la plus courante est de mélanger
l'orientation avec la résolution ou context La résolution et l'orientation sont souvent confondues, mais il s'agit en réalité de deux choses distinctes : la résolution et l'aspect ratio. Ils sont liés, mais ce n'est pas la même chose.
- Orientation signifie laquelle des deux longueurs est supérieure.
- Résolution signifie combien de pixels existent dans chaque dimension.
- Ratio 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 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. Un portrait peint met l'accent sur une personne ou un sujet de grande hauteur. Un tableau horizontal capture la largeur, le contexte et l'espace environnant. L'UI fonctionne de la même manière.
En imagerie et en 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 aux structures verticales.
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 UI 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 peut sembler basique, mais cela 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 réseaux 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 le contraire. Elle expose plus de largeur, ce qui aide avec les vues en deux colonnes, les calendriers, les galeries, la lecture multimédia, les surfaces chargées de données et les vues immersives. Si votre disposition nécessite une comparaison en deux colonnes, 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 le format plus large comme une version étirée du portrait. Ce n'est pas le cas. L'héritage d'information doit souvent changer.
Par exemple :
- Dans une orientation portrait, un tableau de bord peut empiler les cartes en une colonne unique.
- Dans une 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.
- Dans une orientation portrait, un formulaire de paiement peut donner la priorité à de grandes cibles de clic et à un flux clair.
- Dans une orientation plus large, le même écran 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 penser à la gestion des bords, aux zones de sécurité et au comportement plein écran. Si vous ajustez ces détails, Capacitor configuration d'affichage sans bords 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 en portrait se retrouve 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 à la face et au corps d'une personne qu'une large mise en page 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.
L'impression repose également sur le portrait lorsque l'expérience de lecture devrait se dérouler de haut en bas dans une colonne étroite. Cette forme aide l'œil à voyager naturellement vers le bas de la page.
Documents et communication de tous les jours
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
Dans ces circonstances, le portrait devient le modèle mental par défaut pour beaucoup d'équipes.
Réfléchissez aux écrans que les utilisateurs ouvrent régulièrement :
- 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 debout.
- 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 debout avant de supposer quoi que ce soit d'autre.
Cela ne signifie pas que chaque écran doit rester en portrait. Les lecteurs multimédia, les cartes, les grands graphiques et les flux de travail 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 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 d'une 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 le 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-secondaryLa documentation de MDN décrit ces valeurs de manifeste dans sa Référence de l'orientation du Manifeste de l'application web.
Utilisez le CSS lorsque la mise en page doit s'adapter
Commencez par le 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 de l'écran. Commencez par la mise en page étroite, orientée vers le haut, en tant que défaut. Ajoutez ensuite de l'espace pour les éléments secondaires de l'interface uniquement lorsque le viewport devient plus large.
Un certain nombre de pratiques peuvent vous sauver du temps plus tard :
- 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 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');
}
});Cette approche 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 la disposition ou la mise en page, CSS doit s'en charger.
Une règle pratique aide les équipes junior à éviter une grande complexité. N'utilisez pas JavaScript pour forcer des décisions de mise en page que CSS gère bien déjà.
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'un substitut 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 le dispositif 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 courante. Les équipes restreignent la rotation trop largement, et une application simple commence à se sentir rigide.
Un bon modèle mental aide ici. Les paramètres de l'application sont votre politique par défaut. L'écran niveau code est la couche d'exception. Utilisez la politique pour l'intention large, et utilisez l'exception uniquement où un dispositif rotatif perturberait la tâche que l'utilisateur essaie de terminer.
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 le 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 permet généralement, puis affiner le comportement dans les contrôleurs de vue spécifiques lorsque l'écran a des exigences plus strictes.
Cela compte pour les équipes cross-platform. La configuration native répond à la question : « Qu'est-ce que cette application devrait permettre généralement ? » La runtime code répond à la question : « Qu'est-ce que cette écran devrait faire en ce moment ? »
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 de permettre 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 plugin d'orientation d'écran pour les applications Capacitor 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 spécifiques à l'écran avec soin
Utilisez un mode vertical fixe 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.
Une règle utile pour les équipes junior est simple. Si le changement de direction du dispositif ne modifierait que la mise en page, laissez le système de mise en page s'en charger. Si le changement de direction du dispositif modifierait comment la tâche fonctionne, alors l'orientation d'écran code peut être justifiée.
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 est une décision UX en premier lieu et une décision technique en second. Le code est généralement simple. La partie difficile est de choisir un comportement qui se 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 display plus large où cela ajoute de la valeur : n'empêchez pas la rotation sur les écrans qui bénéficient d'une largeur supplémentaire.
- Verrouillez uniquement avec une raison claire : un formulaire, un achat, 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, la guidance de mise en page et d'expérience utilisateur croisée pour les applications Capacitor se marie bien avec la test de l'orientation car l'écran en question doit souvent se sentir naturel 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 de mise à jour rapide, Capgo context : fragment de texte HTML d'une chaîne de mise en page Capgo plus longue (clé parente `submitting_a_pr_to_capgo`). Zone/Page : site web de marketing Capgo. Rôle : phrase de copie du site web. Vu dans : page contributing.astro. Conservez les termes de produit/branche et les termes de développeur exacts.
