Sie drehen Ihr Telefon, um eine Anzeige zu testen, und die Layouts passen sich sauber an oder zerfallen. Der Text wird neu formatiert, die Schaltflächen springen, ein Modalfenster deckt plötzlich die falsche Fläche ab oder Ihr Videoplayer verhält sich genau so, wie Sie es erwarten. Portrait-Orientierung stopp, ein Designbegriff zu sein und zu einem Produktentscheid zu werden.
Wenn Sie für mobile Geräte entwickeln, benötigen Sie eine klare Antwort auf was ist eine Portrait-Orientierung. Nicht nur die Definition aus dem Klassenzimmer, sondern die Version für Entwickler. Wie es das Layout beeinflusst, wann Sie Rotation unterstützen sollten, wann Sie es sperren sollten und wie Sie es in Webanwendungen, native Apps und Capacitor-Projekten ohne die Schaffung eines brüchigen UX behandeln sollten.
Inhaltsübersicht
- Portrait-Orientierung verstehen
- Portrait vs Landschaft: Eine grundlegende Vergleich
- Gemeinsame Einsatzmöglichkeiten in verschiedenen Medien
- Orientierung auf der Webseite handhaben
- Mobile-Apps-Orientierung verwalten
- Benutzererfahrung (UX) - Best Practices für die Bildschirmorientierung
Portrait-Orientierung verstehen
Benutzer bemerken die Orientierung zuerst, wenn sich der Bildschirm dreht. Entwickler bemerken es, wenn diese Drehung ihre Schnittstelle zerstört.
Portrait-Orientierung bedeutet, dass das Bildschirmrahmen länger ist als breit. Das ist die grundlegende Idee. Sie kommt aus der visuellen Kunst, wo Porträts von Personen-Gesichtern und Oberkörpern normalerweise vertikal gerahmt wurden. Diese gleiche Konzeption wurde in die Seite-Design, Fotografie und digitale Schnittstellen übernommen. Ein gutes Referenzpunkt für diese breitere Geschichte ist Wikipedia’s Seiteorientierungsinhalte.
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 sich die Seite in Portrait.
Werum es in Produktarbeit wichtig ist
Portrait wurde zum praktischen Standard für Mobilgeräte, weil die aufrechte Verwendung mit der natürlichen Haltung von Smartphones übereinstimmt. Das beeinflusst das Scrollen, die Daumenreichweite, die Lesefluss, die Formgestaltung und die Platzierung der Navigation.
Ein Feed, ein Artikelansicht, eine Einstellungenansicht oder ein Chatthread liest sich natürlich in einem vertikalen Rahmen besser. Das ist einer der Gründe, warum die Orientierungswahl direkt mit Benutzererfahrungen von mobilen Apps zusammenhängt und nicht nur mit visuellen Stilen.Praktische Regel:
Portrait als Layoutkontext behandeln, nicht nur als Geräteposition. Wo sich Junior-Entwickler oft verheddern
Die übliche Verwirrung ist die Vermischung
Orientierung Die Orientierung mit Auflösung oder Bildschirmverhältnis. Sie sind miteinander verwandt, aber sie sind nicht dasselbe.
- Orientierung besagt, welche Seite länger ist.
- Auflösung besagt, wie viele Pixel in jeder Dimension vorhanden sind.
- Bildschirmverhältnis beschreibt die Beziehung zwischen Breite und Höhe.
Ein Tablet in Portrait-Modus und ein Smartphone in Portrait-Modus können sehr unterschiedliche Dimensionen haben, aber sie teilen trotzdem denselbe Orientierungszustand. Deshalb sollte responsives UI-Logik fragen: 'Ist die Höhe größer als die Breite?' bevor sie etwas Spezifischeres fragt.
Portrait vs Landschaft: Eine grundlegende Vergleich
Eine einfache Art, darüber nachzudenken, ist durch die Komposition. Ein Porträtgemälde konzentriert die Aufmerksamkeit auf eine Person oder ein anderes großes Objekt. Ein horizontales Gemälde erfasst Breite, Kontext und die umgebende Raum. Die UI funktioniert auf die gleiche Weise.
In der Bildbearbeitung und der UI-Design, ist die Porträt-Orientierung der Rechteck, wo die Höhe die Breite überschreitet, also sind die längeren Kanten vertikal. Das ist das Gegenteil der horizontalen Orientierung. SLR Lounges Glossar-Eintrag beschreibt diese technische Definition und warum die Form für hohe Objekte und vertikale Strukturen geeignet ist.
Die Differenz in einer Tabelle
| Orientierung | Form | Beste Anwendung | Typischer Effekt |
|---|---|---|---|
| Portrait | Breiter als hoch | Hinweise, Formulare, Lesen, hohe Themen | Lenkt die Aufmerksamkeit vertikal |
| Landschaft | Breiter als hoch | Video, Karten, Dashboards, breite Szenen | Zeigt mehr horizontale Kontext |
Das klingt grundlegend, aber es ist nützlich, wenn Sie bei einer Produktbewertung Kompromisse treffen.
Was ändert sich für den Benutzer
Portrait schmälert die Aufmerksamkeit. Es reduziert die Seiteninhalte und fördert eine top-unterschriebene Fluss. Deshalb fühlen sich soziale Feeds, Artikelseiten, Onboarding-Schritte und Chat-Interfaces in Portrait oft sauberer an.
Die horizontale Orientierung tut das Gegenteil. Sie zeigt mehr Breite, was bei der Anzeige von Split-Views, Zeitlinien, Galerien, Medienabspiel, datenreichen Oberflächen und immersiven Ansichten hilfreich ist. Wenn Ihre Layout-Anforderungen eine Seiten-an-Seiten-Vergleich erfordern, bietet diese horizontale Form oft mehr Platz.
Portrait ist meistens über den Fokus. Landschaft ist meistens über den Kontext.
Was ändert sich für den Entwickler
Der größte Fehler ist es, das breitere Format als eine gestreckte Version von Portrait zu behandeln. Es ist nicht. Die Informationshierarchie muss oft geändert werden.
Beispiel:
- In Portraitzeigt ein Dashboard Karten in einer einzigen Spalte an.
- In einer breiteren Orientierungzeigt das gleiche Dashboard mehrere Spalten an und enthüllt Filter oder Seitenbereiche.
- In Portraitpriorisiert eine Zahlungsoberfläche große Tasten und einen klaren Ablauf.
- In einer breiteren OrientierungWenn die Felder jedoch zu sehr vertikal komprimiert werden, kann die gleiche Bildschirmfläche sich unangenehm anfühlen.
Entwickler, die an immersiven mobilen Layouts arbeiten, müssen auch an der Handhabung von Rändern, sicheren Bereichen und Vollbildverhalten denken. Wenn Sie sich auf diese Details einlassen, Capacitor Kantenlos-Display-Einstellung ist Teil derselben Konversation, da sich die Orientierung auf die verfügbare Fläche auswirkt, die die Benutzer wahrnehmen.
Gemeinsame Anwendungsfälle in verschiedenen Medien
Portrait-Orientierung erscheint in mehreren Orten als mobile Bildschirme. Das ist wichtig, weil der Begriff nicht in Software begann und nicht nur in Software existiert.
Fotografie und Druck
Ein professionelles Porträt ist das offensichtliche Beispiel. Der vertikale Rahmen passt besser zum Gesicht und Körper einer Person als ein breiter Rahmen würde. Die gleiche Logik gilt für Modefotos, Buchumschläge, Plakate und Zeitschriftenumschläge.
Die Druckdesign auch verlässt sich auf Portrait, wenn die Leseerfahrung sich von oben nach unten in einer engen Spalte bewegen sollte. 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 entworfen. Das ist nicht, weil Portrait immer besser ist. Es ist, weil ein vertikaler Seite gut für die Leseabfolge von Absätzen, Überschriften, Listen und Unterschriften funktioniert.
If Sie jemals ein PDF exportiert haben und bemerkt haben, dass ein breites Tableau plötzlich unleserlich wird, haben Sie die Grenze von Portrait erreicht. Einige Inhalte werden besser in einer horizontalen Formatierung dargestellt. Der Schlüssel besteht darin, das Rahmenwerk mit der Struktur des Inhalts zu verbinden.
Mobile-Produkte und App-Flüsse
Unter diesen Umständen wird Portrait für viele Teams zum Standardmentalmodell.
Denken Sie an die Bildschirme, die Benutzer wiederholt öffnen:
- Chat-Apps: Nachrichten stapeln sich vertikal.
- Social-Apps: Beiträge, Kommentare und Reels werden in einem aufrechten Fluss konsumiert.
- Retail-Apps: Suchergebnisse und Produktlisten scrollen nach unten.
- Banking-Apps: Guthaben, Transaktionen und Bestätigungsflüsse werden normalerweise in vertikalen Abschnitten angeordnet.
Das sind keine Zufälle. Portrait unterstützt die Einerhändigkeit, das Scrollen mit dem Daumen und die lineare Aufgabenerledigung.
Ein Großteil der mobilen UIs fühlt sich intuitiv an, weil die Oberfläche an ein aufrechteres Gerät glaubt, bevor sie an etwas anderes glaubt.
Das bedeutet nicht, dass jeder Bildschirm in Portrait bleiben sollte. Medienanzeiger, Karten, große Diagramme und kamera-basierte Workflows profitieren oft von einer breiteren Rahmung. Aber für den alltäglichen Aufgabenfluss ist Portrait normalerweise der Ausgangspunkt.
Die Handhabung der Orientierung im Web
Ein häufiges Web-Problem erscheint zunächst klein. Die Anwendung liest sich sauber in einem aufrechten Viewport, dann dreht der Benutzer das Gerät und die Grafik überläuft, der Seitenleiste erscheint an falschem Breakpoint oder die Tastatur bedeckt den Submit-Button. Die Orientierung im Web ist wirklich um den Zustand. Die Viewport-Form änderte sich, und die UI muss auf eine vorhersehbare Weise reagieren.
Für Entwickler bedeutet das, zwei Aufgaben zu trennen. CSS handhabt die Layout-Änderungen. JavaScript handhabt die Verhaltensänderungen. Wenn Sie das Projekt für mobile später paketieren, ist diese Web-Schicht immer noch wichtig. Mit Capacitor eine Web-Anwendung in eine mobile Anwendung umzuwandeln entfernt nicht die Notwendigkeit einer guten Web-Orientierungshandhabung. Es macht diese Grundlage noch wichtiger.
Die Plattform gibt Ihnen zwei Hauptwerkzeuge. Die Screen Orientation API gibt die Orientierungstyp und die Änderungsereignisse preis, und das Web App Manifest lässt eine installierte Anwendung einen bevorzugten aufrechten Modus wie , oder , anbieten. MDN dokumentiert diese Manifest-Werte in seiner Web App Manifest-Orientierungshinweise. portrait, portrait-primaryDie Plattform gibt Ihnen zwei Hauptwerkzeuge. Die Screen Orientation __CAPGO_KEEP_0__ gibt die Orientierungstyp und die Änderungsereignisse preis, und das Web App Manifest lässt eine installierte Anwendung einen bevorzugten aufrechten Modus wie , oder , anbieten. MDN dokumentiert diese Manifest-Werte in seiner Web App Manifest-Orientierungshinweise. portrait-secondaryDie Plattform gibt Ihnen zwei Hauptwerkzeuge. Die Screen Orientation __CAPGO_KEEP_0__ gibt die Orientierungstyp und die Änderungsereignisse preis, und das Web App Manifest lässt eine installierte Anwendung einen bevorzugten aufrechten Modus wie , oder , anbieten. MDN dokumentiert diese Manifest-Werte in seiner Web App Manifest-Orientierungshinweise. Die Plattform gibt Ihnen zwei Hauptwerkzeuge. Die Screen Orientation __CAPGO_KEEP_0__ gibt die Orientierungstyp und die Änderungsereignisse preis, und das Web App Manifest lässt eine installierte Anwendung einen bevorzugten aufrechten Modus wie , oder , anbieten. MDN dokumentiert diese Manifest-Werte in seiner Web App Manifest-Orientierungshinweise..
Verwenden Sie CSS, wenn die Layoutanpassung erforderlich ist
Mit CSS beginnen. Es ist der günstigste und zuverlässigste Weg, um auf die Wechsel der Rollen von Breite und Höhe zu reagieren.
/* 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;
}
}Dies funktioniert wie progressive Enhancement für die Bildschirmform. Beginnen Sie mit der schmalen, aufrechten Layout als Standard. Fügen Sie dann nur Platz für sekundäre UI hinzu, wenn das Fenster breiter wird.
Einige Praktiken sparen Zeit später:
- Mit Ihrer Hauptmodus beginnen: Wenn Menschen hauptsächlich die App aufrecht verwenden, machen Sie das die Grundlage des Layouts.
- Fixe Höhen vermeiden: Ein Gerät drehen kann die verwendbare vertikale Fläche schnell schrumpfen, insbesondere wenn die Browser-UI oder ein virtueller Tastatur ist sichtbar.
- Realen Interaktionszuständen testen: Formulare, feste Kopfzeilen und unteren Blätter scheitern häufig bei der Drehung, nicht in statischen Screenshots.
Verwenden Sie JavaScript, wenn die Verhaltensreaktion erforderlich ist
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 Änderung der Orientierung den Zustand einer 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');
}
});Diese Muster sind 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 darauf reagieren. Wenn die Rotation nur die Abstände oder die Platzierung ändert, sollte CSS damit umgehen.
Eine praktische Regel hilft junior Teams, eine Menge Komplexität zu vermeiden. Verwenden Sie JavaScript nicht, um Layoutentscheidungen zu erzwingen, die CSS bereits gut handhabt.
Setzen Sie eine bevorzugte Orientierung für PWAs
Wenn Ihr PWA hauptsächlich für die Aufrechteinstellung konzipiert ist, deklarieren Sie das in der Manifestdatei.
{
"name": "My App",
"short_name": "MyApp",
"display": "standalone",
"orientation": "portrait"
}Dies ist eine Vorliebe und kein Ersatz für responsives Design. Es hilft dem Browser, zu verstehen, wie die installierte App sich öffnen und verhalten sollte in unterstützten Kontexten.
Sie können auch eine Orientierungssperre bei Laufzeit anfordern, wenn der Browser dies zulässt:
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 brechen würde, wie z.B. eine geführte Aufnahmefluss oder eine Bildschirm mit strengen physischen Ausrichtungsvorgaben. In den meisten anderen Fällen ist es das bessere Engineering, die Schnittstelle anzupassen, da dies sowohl dem Gerät als auch dem Benutzer Respekt entgegenbringt.
Orientierung in mobilen Apps verwalten
Mobil-Apps können mehr tun als ein Browser-Tab. Sie können eine Standard-Schirmrichtung auf der App-Ebene deklarieren und dann die Verhaltensweise für eine einzelne Schirmfläche ä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-seitige code ist die Ausnahmenschicht. Verwenden Sie die Politik für breite Absichten und verwenden Sie die Ausnahme nur, wo ein rotierender Gerät das Job, den der Benutzer ausführen möchte, stören würde.
Native Plattformkontrolle
An Android, die Orientierung wird oft in AndroidManifest.xml für eine Aktivität:
<activity
android:name=".MainActivity"
android:screenOrientation="portrait" />Dies funktioniert wie ein oberstes Konfigurationsflag. Es ist einfach, vorhersehbar und leicht durchzusetzen über die gesamte Aktivität. Der Kompromiss ist der Umfang. Wenn nur ein Bildschirm die Stehende-Modus benötigt, ist die globale Anwendung dieser Regel normalerweise zu grob.
An iOS, unterstützte Orientierungen werden in Xcode über Zielgruppeneinstellungen und App-Metadaten festgelegt. Sie können definieren, was die App im Allgemeinen unterstützt, und dann das Verhalten in bestimmten View-Controllern feinabstimmen, wenn ein Bildschirm strengere Anforderungen hat.
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?”
Programmatische Steuerung in Capacitor-Anwendungen
Wenn Sie mit Capacitor bauen, gehört die dynamische Steuerung normalerweise in code, in der Nähe der Route oder Ansicht, die sie benötigt. Ein Anmeldebildschirm kann in Portrait-Modus einfacher zu bedienen sein. Ein Medienbildschirm oder eine Kamera-Flussbedingung kann die Rotation aufgrund der Art und Weise, wie das Gerät gehalten wird, zulassen.
Ein Plugin hält diese Logik lesbar und vermeidet es, dass Benutzer an native Anpassungen herangeführt werden. Das Capacitor-Bildschirmorientierung-Plugin für Capacitor-Anwendungen lässt Sie die aktuelle Orientierung lesen, eine Einschränkung für eine bestimmte Modus wie Portrait anwenden und diese Einschränkung, wenn der Benutzer wieder zu einer flexiblen Bildschirmansicht zurückkehrt, entfernen.
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);
}Das Muster ist einfach. Wenden Sie die Einschränkung an, wenn der Bildschirm aktiv wird. Entfernen Sie sie, wenn der Bildschirm nicht mehr aktiv ist. In einer routerbasierten Anwendung bedeutet dies oft, dass die Orientierungsänderungen an den Lifecycle-Hooks der Seite gebunden werden, anstatt dass die Aufrufe über zufällige Komponenten verteilt werden.
Wählen Sie die Bildschirm-spezifischen Einschränkungen sorgfältig
Verwenden Sie einen fixierten aufrechten Modus, wenn die Rotation die Eingabe, die Ausrichtung oder die Benutzerfokus stören würde.
Häufige Beispiele sind:
- Anmeldebildschirme: Die Eingabefelder bleiben stabil, während der Benutzer tippt.
- Zahlungs- und Bestätigungsstufen: weniger Layoutänderungen während hoch konzentrierter Aufgaben.
- Kiosk- oder geführte Workflows: Die Oberfläche benötigt eine konsistente Darstellung.
Lassen Sie das Gerät frei rotieren, wenn zusätzlicher Breite oder ein anderes Griff deutlich hilft, die Aufgabe zu erfüllen.
Typische Beispiele umfassen Medienwiedergabe, Karten, Spiele, Kameraansichten und dichte Datenanzeigen.
Ein nützliches Regelwerk für Junior-Teams ist einfach. Wenn die Änderung der Gerätedrehung nur die Abstände ändern würde, lassen Sie das Layoutsystem damit umgehen. Wenn die Änderung der Gerätedrehung die Art und Weise, wie die Aufgabe funktioniert, ändern würde, dann kann die Ausrichtung auf Bildschirm-Ebene code gerechtfertigt werden.
Capgo wird hier aus praktischen Gründen erwähnt. In Capacitor-Projekten ist die Ausrichtungskontrolle eine der Plattformfunktionen, die als kleiner UI-Detail beginnt und sich schnell zu App-Verhalten entwickelt. Behandeln Sie es wie Verhalten. Halten Sie die Standardflexibilität bei, wenden Sie Einschränkungen sparsam an und entfernen Sie sie, sobald die Anzeige sie nicht mehr benötigt.
Benutzereingriff-Grundsätze für die Bildschirmorientierung
Die Ausrichtungshandhabung ist eine Benutzereingriff-Entscheidung zuerst und eine technische Entscheidung zweitens. Die code ist meistens einfach. Die schwierige Sache ist die Wahl des Verhaltens, das sich natürlich anfühlt.
Ein kurzer Checkliste hilft:
- Entwickeln Sie für den dominanten Kontext: Wenn die meisten Benutzer aufrecht beginnen, machen Sie den Portrait-Modus zur stärksten Version der Oberfläche.
- Unterstützen Sie ein umfassenderes Anzeigemodus, das Wert hinzufügt: blockiere die Drehung nicht auf Bildschirmen, die von einem zusätzlichen Breitenwert profitieren.
- Sperren Sie nur mit einem klaren Grund: Ein Formular, eine Bestellabwicklung oder ein sicheres Fluss könnte es rechtfertigen. Ein Inhaltsbildschirm wird es normalerweise nicht.
- Erhalten Sie den Zustand bei der Drehung: Benutzer sollten keine Eingaben, Scrollpositionen oder ausgewählten Registerkarten verlieren.
- Testen Sie beide Orientierungen auf echten Geräten: Simulatoren verpassen unangenehme Übergänge, Überlappungen der Tastatur und Probleme mit der sicheren Bereichsgröße.
Für umfassende Layoutentscheidungen Querplattform-UI- und UX-Leitfäden für Capacitor-Anwendungen passen gut zu der Orientierungstestung, weil dasselbe Bildschirm oft so angepasst werden muss, dass es auf verschiedenen Geräten und Plattformenkonventionen 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 Rahmenvorschrift, ein Layoutzustand und eine Benutzererwartung. Gute Apps behandeln sie so.
If you’re shipping Capacitor apps and need controlled orientation behavior alongside fast post-release fixes, Capgo ist es wert, einen Blick darauf zu werfen. Es bietet live Aktualisierungen für CapacitorJS- und Electron-Apps und hält auch Plugins für die App-Fähigkeiten wie die Bildschirmorientierung bereit, die Ihnen helfen können, wenn Sie bestimmte Ansichten sperren oder aktivieren möchten, ohne Ihr gesamtes Release-Prozess neu aufzubauen.
