Sie drehen Ihr Telefon, um eine Anzeige zu testen, und die Layouts passen sich an oder fallen auseinander. Der Text wird neu formatiert, die Schaltflächen springen, ein Modalfenster deckt plötzlich das falsche Gebiet ab oder Ihr Videoplayer verhält sich genau so, wie Sie es erwarten. In diesem kleinen Moment ist es, wo portrait-Orientierung stoppt als Designbegriff und wird zu einer Produktentscheidung.
Wenn Sie für mobile Geräte entwickeln, benötigen Sie eine klare Antwort auf was eine Portrait-Orientierung ist. Nicht nur die Schuldefinition, sondern die Entwicklerversion. Wie es sich auf die Layoutausrichtung auswirkt, wann die Rotation unterstützt werden sollte, wann sie gesperrt werden sollte und wie sie in Webanwendungen, native Apps und Capacitor-Projekten ohne Erzeugung einer brüchigen Benutzeroberfläche gehandhabt werden kann.
Tabelle der Inhalte
- Verständnis der Portrait-Orientierung
- Portrait vs. Landschaft: Eine grundlegende Vergleichstabelle
- Gängige Anwendungsfälle in verschiedenen Medien
- Orientierung auf der Webanwendung verwalten
- Orientierung in mobilen Apps verwalten
- Benutzererfahrung (UX) - Best Practices für die Bildschirmorientierung
Portraitorientierung verstehen
Benutzer merken sich die Orientierung, wenn sich der Bildschirm dreht. Entwickler merken sich sie, wenn diese Drehung ihre Schnittstelle zerstört.
Portraitorientierung bedeutet, dass das Bildschirmrahmen länger ist als es breit ist. Das ist der Kerngedanke. Er kommt aus der visuellen Kunst, wo Porträts von Personen und deren Oberkörper normalerweise in vertikaler Form dargestellt wurden. Dieser gleiche Gedanke wurde in die Seitegestaltung, Fotografie und digitale Schnittstellen übernommen. Ein gutes Referenzwerk für diese breitere Geschichte ist Wikipedia-Seite zur Übersicht über die Seitenorientierung.
Für Entwickler ist der wichtige Punkt, dass die Portraitorientierung nicht an eine Bildschirmgröße, ein Gerät oder eine Dateiformat gebunden ist. Es ist eine Regel über die Form. Wenn die Höhe größer ist als die Breite, befindet man sich in der Portraitorientierung.
Weshalb es in der Produktarbeit wichtig ist
Portrait wurde zu einem praktischen Standard für Mobilgeräte, weil die aufrechte Verwendung mit der natürlichen Haltung der Menschen übereinstimmt, wie sie ihre Smartphones halten. Dies wirkt sich auf das Scrollen, die Daumenreichweite, die Lesefluss, die Formgestaltung und die Platzierung der Navigation aus.
Aus einer Feed-Ansicht, einer Artikelansicht, einer Einstellungsanzeige oder einem Chat-Thread liest man normalerweise in einem vertikalen Rahmengriff besser. Das ist einer der Gründe, warum sich die Orientierungswahl direkt auf die Entscheidungen zum Benutzererlebnis eines mobilen Apps auswirkt, nicht nur auf die visuelle Gestaltung. mobile app Benutzererlebnisentscheidungen, nicht nur auf die visuelle Gestaltung.
Praktische Regel: Portrait als Layoutkontext behandeln, nicht nur als Geräteposition.
Wo sich Junior-Entwickler oft verheddern
Die übliche Verwechslung ist die Mischung von Orientierung mit Auflösung oder contextSie sind miteinander verbunden, aber sie sind nicht dasselbe.
- Orientierung bedeutet, welche Seite länger ist.
- Auflösung bedeutet, wie viele Pixel in jeder Dimension existieren.
- Bildverhältnis beschreibt die Beziehung zwischen Breite und Höhe.
Ein Tablet in Portrait- und ein Smartphone in Portrait-Modus können sehr unterschiedliche Dimensionen haben, aber sie teilen trotzdem denselben Orientierungsstatus. Deshalb sollte responsives Benutzeroberflächencode, bevor er etwas Spezifischeres fragt, fragen: „Ist die Höhe größer als die Breite?“
Portrait vs. Landschaft: Eine grundlegende Vergleichsübersicht
Ein einfacher Weg, darüber nachzudenken, ist durch Komposition. Ein Portraitgemälde konzentriert die Aufmerksamkeit auf eine Person oder ein anderes hohes Objekt. Ein horizontales Gemälde erfasst Breite, Kontext und umgebenden Raum. Die Benutzeroberfläche funktioniert genauso.
In der Bildbearbeitung und der Benutzeroberflächengestaltung ist die Portraitorientierung der Rechteck, in dem Höhe überschreitet BreiteAlso sind die längeren Kanten vertikal. Eintrag im Glossar von SLR Lounge Beschreibt die technische Definition und warum die Form für hohe Gegenstände und vertikale Strukturen geeignet ist.
Der Unterschied in einer Tabelle
| Ausrichtung | Form | Beste Anpassung | context: Capgo Builder / native cloud build Produktseite. Rolle: Kurzer UI-Label oder Navigationselement. Nachrichtenschlüssel `native_build_builder_compare_fit_feature` (Native Build Builder Compare Fit Feature). |
|---|---|---|---|
| Häufiger Effekt | Portrait | Höher als breit ist er | Aufmerksamkeit richtet sich vertikal aus |
| Landschaftsformat | Breiter als hoch | Videos, Karten, Dashboards, breite Szenen | Wie mehr horizontalen Kontext zeigt |
Das klingt grundlegend, aber es ist nützlich, wenn Sie bei einer Produktbewertung Kompromisse treffen müssen.
Welche Änderungen sich für den Benutzer ergeben
Portrait schmälert die Aufmerksamkeit normalerweise. Es reduziert Seiteninhalte und fördert eine top-bunten Fluss. Deshalb fühlen sich soziale Feeds, Artikelseiten, Onboarding-Schritte und Chat-Interfaces in Portrait oft sauberer an.
Die horizontale Orientierung tut das Gegenteil. Es offenbart mehr Breite, was bei der Anzeige von Split-Views, Zeitleisten, Galerien, Mediaplayback, datenreichen Oberflächen und immersiven Ansichten hilft. Wenn Ihre Layoutsidee eine Seiten-an-Seiten-Vergleich erfordert, gibt Ihnen diese horizontale Form oft mehr Platz.
Portrait ist normalerweise über die Aufmerksamkeit. Landschaft ist normalerweise über den Kontext.
Welche Änderungen sich für den Entwickler ergeben
Der größte Fehler ist, das breitere Format als eine gestreckte Version von Portrait zu behandeln. Es ist nicht. Die Informationshierarchie muss oft geändert werden.
Zum Beispiel:
- In Portrait-Modus, in dem eine Dashboard-Karte in eine einzelne Spalte gestapelt werden kann.
- In einem breiteren Ausrichtung, könnte dasselbe Dashboard zu mehreren Spalten wechseln und Filter oder Seitenbereiche offenlegen.
- In Portrait-Modus, kann eine Zahlungsanzeige große Tastenpriorisieren und einen klaren Ablauf haben.
- In einer breiteren Ausrichtung, kann dasselbe Bildschirmfeld unangenehm wirken, wenn Felder zu sehr komprimiert werden.
Entwickler, die an immersiven mobilen Layouts arbeiten, müssen auch an Randverarbeitung, sicheren Bereichen und volle-Bildschirm-Verhalten denken. Wenn Sie diese Details anpassen Capacitor kantenlose Display-Einstellung
Gemeinsame Anwendungsbereiche in verschiedenen Medien
Portrait-Orientierung erscheint an mehreren Orten als nur auf Mobilgeräten. Das ist wichtig, weil der Begriff nicht in der Software begann und nicht nur der Software gehört.
Fotografie und Druck
Ein professionelles Porträt ist das offensichtliche Beispiel. Der vertikale Rahmen passt besser zu einem Menschenkopf und Körper als ein breiter Rahmen.
Das gleiche Logik gilt für Modefotos, Buchumschläge, Poster und Zeitschriftenumschläge.
Druckdesign hängt auch von der Portrait-Orientierung ab, wenn die Leseerfahrung von oben nach unten in einer engen Spalte verlaufen soll. Diese Form hilft dem Auge, natürlich nach unten auf der Seite zu reisen.
Dokumente und alltägliche Kommunikation
Die meisten Berichte, Lebensläufe, Briefe und internen Dokumente sind in Portrait-Format entworfen. Das ist nicht, weil Portrait immer besser ist. Es ist, weil ein vertikaler Seite gut für die Leseabläufe von Absätzen, Überschriften, Listen und Unterschriften geeignet ist.
Wenn Sie ein PDF exportiert haben und bemerkt haben, dass ein breites Tabelle plötzlich unleserlich wird, haben Sie die Grenzen von Portrait gesehen. Einige Inhalte sind besser in einer horizontalen Formatierung dargestellt. Der Schlüssel ist, die Rahmenform mit der Inhaltsstruktur zu passen.
Mobilprodukte und App-Flows
Unter diesen Umständen wird Portrait-Orientierung für viele Teams zum Standardmentalmodell.
- Chat-Apps: Nachrichten werden senkrecht gestapelt.
- Soziale Apps: Beiträge, Kommentare und Reels werden in einem aufrechten Fluss konsumiert.
- Einkaufs-Apps: Suchergebnisse und Produktlisten scrollen nach unten.
- Banking-Apps: Saldo, Transaktionen und Bestätigungsflüsse werden normalerweise in vertikalen Abschnitten angeordnet.
Diese Muster sind keine Zufälle. Portrait unterstützt die Einhändigkeit, das Daumen scrollen und die lineare Aufgabenerledigung.
Ein Großteil der mobilen UI fühlt sich intuitiv an, weil die Schnittstelle an einem aufrechten Gerät anfängt, bevor sie etwas anderes annehmen soll.
Das bedeutet nicht, dass jede Seite im Portrait bleiben sollte. Medienanzeiger, Karten, große Diagramme und kamera-basierte Workflows profitieren oft von einem breiteren Rahmen. Aber für alltägliche Aufgabenflüsse ist Portrait normalerweise der Ausgangspunkt.
Die Orientierung auf der Webseite
Aus einem kleinen Webfehler wird oft ein großer. Deine App liest sich sauber in einem aufrechten Bildschirm, dann dreht der Benutzer das Gerät und die Grafik überläuft, die Sidebar erscheint an falschem Breakpoint oder die Tastatur bedeckt den Submit-Button. Die Orientierung im Web ist wirklich um den Zustand. Die Form des Bildschirms hat sich geändert, und deine UI muss auf vorhersehbare Weise reagieren.
Für Entwickler bedeutet das, zwei Aufgaben zu trennen. CSS handhabt die Layout-Änderungen. JavaScript handhabt die Verhaltensänderungen. Wenn du das gleiche Projekt später für mobile Geräte packst, bleibt diese Web-Schicht wichtig. Das Umwandeln einer Web-App in eine mobile App mit Capacitor entfernt nicht die Notwendigkeit für eine gute Web-Orientierungshandhabung. Es macht diese Grundlage noch wichtiger. Die Plattform gibt dir zwei Hauptwerkzeuge. Die Screen Orientation __CAPGO_KEEP_0__ gibt die Orientierungstypen und -änderungen an, und das Web App Manifest lässt eine installierte App einen bevorzugten aufrechten Modus wie , oder , deklarieren.
The platform gives you two main tools. The Screen Orientation API exposes orientation type and change events, and the Web App Manifest lets an installed app declare a preferred upright mode such as portrait, portrait-primaryBenutze CSS, wenn die Layout-Änderungen passieren sollen. portrait-secondaryBeginne mit CSS. Es ist der günstigste und zuverlässigste Weg, auf die Wechsel von Breite und Höhe zu reagieren. Das funktioniert wie progressive Verbesserung für die Bildschirmform. Beginne mit der schmalen, aufrechten Layout als Standard. Dann füge nur dann Platz für sekundäre UI hinzu, wenn der Bildschirm breiter wird..
Einige Praktiken sparen dir später Zeit:
Starte mit CSS.
/* 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;
}
}Benutze die `orientation` Eigenschaft.
Benutze die `width` und `height` Eigenschaften.
- Starten Sie von Ihrer primären Modus: Wenn die Menschen die App hauptsächlich aufrecht verwenden, machen Sie das die Basislayout.
- Vermeiden Sie fixe Höhen: Ein Drehgerät kann den verwendbaren vertikalen Raum schnell schrumpfen, insbesondere wenn die Browser-UI oder ein virtueller Tastatur ist sichtbar.
- Testen Sie echte Interaktionszustände: Formulare, feste Kopfzeilen und unteren Blätter scheitern häufig bei der Rotation, nicht in statischen Screenshots.
Verwenden Sie JavaScript, wenn das Verhalten reagieren muss
CSS kann Boxen neu anordnen. Es kann jedoch nicht entscheiden, wann ein Diagramm neu erstellt oder ein Gestenhandler zurückgesetzt werden soll.
Verwenden Sie JavaScript, wenn die Orientierung die Zustandsorientierte UI beeinflusst.
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');
}
});Dieses Muster ist nützlich für Canvas, Mediensteuerungen, Kartenansichten und benutzerdefinierte Navigationsshells. Das mentale Modell ist einfach. Wenn die Rotation die Datenpräsentation oder die Interaktionslogik ändert, sollte JavaScript reagieren. Wenn die Rotation nur die Platzierung oder die Anordnung ändert, sollte CSS es handhaben.
Eine praktische Regel hilft junior Teams, eine Menge Komplexität zu vermeiden. Verwenden Sie nicht JavaScript, um Layoutentscheidungen zu erzwingen, die CSS bereits gut handhabt.
Legen Sie eine bevorzugte Orientierung für PWAs fest
Wenn Ihre PWA hauptsächlich für die Aufrechterhaltung konzipiert ist, deklarieren Sie das im Manifest.
{
"name": "My App",
"short_name": "MyApp",
"display": "standalone",
"orientation": "portrait"
}Das ist eine Vorliebe und kein Ersatz für eine responsiv gestaltete Oberfläche. Es hilft dem Browser, zu verstehen, wie die installierte App sich öffnen und im unterstützten Kontext verhalten sollte.
Sie können auch eine Orientierungssperre bei Laufzeit anfordern, wenn der Browser es erlaubt:
async function lockPortrait() {
try {
await screen.orientation.lock('portrait');
console.log('Orientation locked');
} catch (err) {
console.log('Lock failed:', err);
}
}Verwenden Sie dies vorsichtig. Eine gute Regel ist, nur dann zu sperren, wenn die Rotation die Aufgabe selbst stören würde, wie z.B. bei einer geführten Aufnahmefluss oder einer Bildschirm mit strengen physischen Ausrichtungsvorgaben. In den meisten anderen Fällen ist es das bessere Engineering, die Oberfläche anzupassen, da dies sowohl dem Gerät als auch dem Benutzer Respekt entgegenbringt.
Orientierung in mobilen Apps verwalten
Mobile Apps können mehr tun als ein Browserfenster. Sie können eine Standardbildschirmrichtung auf App-Ebene deklarieren und dann die Verhalten für einen einzelnen Bildschirm ändern, wenn die Aufgabe es erfordert. Diese zusätzliche Kontrolle ist nützlich, aber sie schafft auch ein häufiges Missverständnis. Teams beschränken die Rotation zu weit, und eine einfache App beginnt sich steif zu fühlen.
Ein gutes mentales Modell hilft hier. App-weite Einstellungen sind Ihre Standardpolitik. Bildschirm-basierte code ist die Ausnahmenschicht. Verwenden Sie die Politik für breite Absichten und verwenden Sie die Ausnahme nur, wo eine rotierende Gerät die Arbeit des Benutzers stören würde.
Native Plattform-Kontrolle
Auf Android, wird die Orientierung oft in AndroidManifest.xml Für eine Aktivität:
<activity
android:name=".MainActivity"
android:screenOrientation="portrait" />Dies funktioniert wie eine oberste Konfigurationsflagge. Es ist einfach, vorhersehbar und leicht durchzusetzen auf der gesamten Aktivität. Der Handelnde ist der Umfang. Wenn nur eine Seite eine Hochformatmodus benötigt, ist die globale Anwendung dieser Regel normalerweise zu unpräzise.
Auf iOSwerden die unterstützten Orientierungen in Xcode über Zielkonfigurationen und Anwendungsdaten gesetzt. Sie können definieren, was die App im Allgemeinen zulässt, und dann das Verhalten in spezifischen View-Controllern feinabstimmen, wenn eine Seite strengere Anforderungen hat.
Das getrennte Ansinnen ist für Cross-Plattform-Teams wichtig. Die native Konfiguration antwortet: “Was sollte diese App im Allgemeinen zulassen?” Die code-Laufzeit antwortet: “Was sollte diese Seite gerade tun?”
Programmatische Kontrolle in Capacitor-Apps
Wenn Sie mit Capacitor bauen, gehört die dynamische Kontrolle normalerweise in code, nahe bei der Route oder dem View, der sie benötigt. Eine Anmeldeseite mag in Hochformat einfacher zu bedienen sein. Eine Mediensicht oder eine Kamera-Fluss mag Rotation basierend auf der Haltung des Geräts zulassen müssen.
Ein Plugin hält diese Logik lesbar und vermeidet kundenspezifische native Anbindungen. Das __CAPGO_KEEP_0__-Orientierung-Plugin für __CAPGO_KEEP_1__-Apps Capacitor screen orientation plugin for Capacitor apps Das Muster ist einfach. Die Einschränkung anwenden, wenn die Seite aktiv wird. Die Einschränkung entfernen, wenn die Seite nicht mehr aktiv ist. In einer Routen-basierten App bedeutet dies oft, die Orientierungsänderungen an den Seitenlebenszyklushooks zu binden, anstatt die Aufrufe über zufällige Komponenten zu streuen.
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);
}Die __CAPGO_KEEP_0__-Orientierung-Plugin für __CAPGO_KEEP_1__-Apps
Legen Sie die Bildschirm-spezifischen Einschränkungen sorgfältig an.
Verwenden Sie eine feste Hochformat-Modus, wenn eine Rotation die Eingabe, die Ausrichtung oder den Benutzer-Fokus stören würde.
Häufige Beispiele sind:
- Authentifizierungs-Bildschirme: Die Eingabefelder bleiben stabil, während der Benutzer tippt.
- Zahlungs- und Bestätigungs-Schritte: Weniger Layout-Änderungen während hoch konzentrierter Aufgaben.
- Kiosk- oder geführte Workflows: Die Schnittstelle benötigt eine konsistente Darstellung.
Lasen Sie das Gerät frei rotieren, wenn zusätzliche Breite oder ein anderes Greifen-Gefühl dem Task offensichtlich hilft.
Typische Beispiele sind Medien-Playback, Karten, Spiele, Kamera-Ansichten und dichte Daten-Bildschirme.
Eine nützliche Regel für Junior-Teams ist einfach. Wenn sich die Geräte-Richtung ändern würde, würde dies nur die Abstände ändern, lassen Sie das Layout-System damit umgehen. Wenn sich die Geräte-Richtung ändern würde, würde dies, wie der Task funktioniert, dann kann die Bildschirm-basierte Orientierung code gerechtfertigt werden.
Capgo wird hier erwähnt, weil es eine praktische Gründe gibt. In Capacitor Projekten ist die Orientierungskontrolle eine der Plattformfunktionen, die als kleiner UI-Detail beginnt und sich schnell zu einer App-Funktion entwickelt. Behandeln Sie es wie eine App-Funktion. Halten Sie die Standardflexibilität, beschränken Sie sie nur sparsam und entfernen Sie sie, sobald das Bildschirm nicht mehr benötigt wird.
Benutzererfahrung (UX) - Best Practices für die Bildschirmorientierung
Die Orientierungshandhabung ist eine UX-Entscheidung an erster Stelle und eine technische Entscheidung an zweiter Stelle. Der code ist normalerweise unkompliziert. Die schwierige Sache ist die Wahl einer Verhaltensweise, die natürlich wirkt.
Eine kurze Checkliste hilft:
- Entwickeln Sie für den dominanten Kontext: Wenn die meisten Benutzer aufrecht beginnen, machen Sie die Portrait-Orientierung zur stärksten Version der Schnittstelle.
- Unterstützen Sie eine breitere Anzeigemodus, wenn sie Wert hinzufügt: Blockieren Sie die Rotation nicht auf Bildschirmen, die von einer größeren Breite profitieren.
- Blockieren Sie nur mit einem klaren Grund: Ein Formular, eine Bestellung oder ein sicheres Flow mag es rechtfertigen. Ein Inhaltsbildschirm wird es normalerweise nicht.
- Behalten Sie den Zustand bei der Rotation aufrecht: Benutzer sollten keine Eingaben, keine Scrollposition oder keine ausgewählten Registerkarten verlieren.
- Testen Sie beide Orientierungen auf echten Geräten: Simulatoren vermissen unangenehme Übergänge, Tastaturüberschneidungen und sicherheitsrelevante Bereiche.
Für umfassendere Layoutentscheidungen passt sich die cross-plattformige UI- und UX-Leitlinie für Capacitor-Anwendungen gut an, weil die gleiche Anzeige oft so gestaltet werden muss, dass sie auf verschiedenen Gerätesätzen und Plattformkonventionen natürlich wirkt. Die wichtigste Erkenntnis ist einfach. Wenn Sie fragen, was eine Portrait-Orientierung ist, lautet die Antwort nicht nur „vertikal“. Es ist eine Rahmenregel, ein Layoutzustand und eine Benutzererwartung. Gute Apps behandeln sie so.
Wenn Sie __CAPGO_KEEP_0__-Anwendungen liefern und kontrollierte Orientierungsverhalten benötigen, das sich schnell nach der Veröffentlichung ändern lässt
Capacitor Capgo Geschrieben von
