Was ist eine Bildschirmorientierung: Leitfaden für 2026

Sie drehen Ihr Telefon, um eine Anzeige zu testen, und die Anordnung passt sich sauber an oder bricht zusammen. Der Text fließt um, die Schaltflächen springen, ein Modalfenster deckt plötzlich die falsche Fläche ab oder Ihr Videoplayer verhält sich genau so, wie erwartet. Diese kleine Moment ist, wo portrait orientation stops being a design term and becomes a product decision.

Wenn Sie für mobile Geräte entwickeln, benötigen Sie eine klare Antwort auf was eine Portrait-Orientierung ist. Nicht nur die Definition aus dem Klassenzimmer, sondern die Version für Entwickler. Wie es sich auf die Layoutgestaltung auswirkt, wann die Rotation unterstützt werden sollte, wann es gesperrt werden sollte und wie es in Webanwendungen, native Apps und Capacitor-Projekten ohne die Schaffung eines brüchigen Benutzererlebnisses behandelt werden sollte.

Inhaltsverzeichnis

Portrait-Orientierung verstehen
- Warum es in der Produktarbeit wichtig ist
- Wo sich Junior-Entwickler oft verheddern
Portrait gegenüber Landschaft: Eine grundlegende Vergleichsübersicht
Gemeinsame Verwendungsfälle in verschiedenen Medien
Orientierungshandhabung auf der Webanwendung
Orientierungshandhabung in mobilen Apps
Benutzerechte Richtlinien für die Bildschirmorientierung

Verständnis der Portraitorientierung

Benutzer merken sich die Orientierung, wenn sich der Bildschirm dreht. Entwickler merken sich sie, wenn diese Drehung ihre Schnittstelle zerstört.

Eine Person hält ein Smartphone horizontal mit einer Dashboard-Anwendungsoberfläche auf dem Bildschirm.

Portraitorientierung bedeutet, dass das Bildschirmrahmen länger ist als es breit ist. Das ist die Kernidee. Sie kommt aus der visuellen Kunst, wo Porträts von einer Person’s Gesicht und Oberkörper normalerweise vertikal gerahmt wurden. Das gleiche Konzept wurde in die Seite-Design, Fotografie und digitale Schnittstellen übernommen. Ein gutes Referenz für diese breitere Geschichte ist die Übersicht über die Seitenorientierung auf Wikipedia.

Für die Bauherren ist der wichtige Teil, dass die Portraitorientierung nicht an eine Bildschirmgröße, ein Gerät oder ein Dateiformat gebunden ist. Es ist eine Regel über die Form. Wenn die Höhe größer ist als die Breite, bist du 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 Telefone halten. Das beeinflusst das Scrollen, den Daumenbereich, die Leseabläufe, die Formgestaltung und die Platzierung der Navigation.

Aus einer Feed-Ansicht, einem Artikel, der Einstellungen-Bildschirm oder einem Chat-Thread liest sich die Inhalte in einem vertikalen Rahmen natürlich besser. Das ist einer der Gründe, warum sich die Orientierungswahl direkt auf die Entscheidungen über die Benutzererfahrung von mobilen Apps auswirkt, 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 Breiten-Verhältnis __CAPGO_KEEP_0__ __CAPGO_KEEP_0__. Sie sind miteinander verwandt, aber nicht dasselbe.

Orientierung bedeutet, welche Seite länger ist.
Auflösung bedeutet, wie viele Pixel in jeder Dimension existieren.
Bildschirmverhältnis beschreibt die Beziehung zwischen Breite und Höhe.

Ein Tablet in Portrait- und ein Handy in Portrait-Modus können sehr unterschiedliche Dimensionen haben, aber trotzdem den gleichen Orientierungsstatus haben. 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 Vergleichsübersicht

Eine einfache Art, 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 UI funktioniert genauso.

Eine visuelle Anleitung zum Vergleichen von Portrait- und Landschaftsorientierungen, die ihre besten Verwendungszwecke für Inhalte und Gerätedisplays darlegt.

In der Bildbearbeitung und der UI-Design ist die Portraitorientierung der Rechteck, in dem Höhe überschreitet Breite, so die längeren Kanten sind vertikal. Das ist das Gegenteil der horizontalen Ausrichtung. SLR Lounge’s 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 Anpassung	Typischer Effekt
Portrait	Breiter als hoch	Einstellungen, Formulare, Lesen, hohe Objekte, vertikale Strukturen	Lenkt die Aufmerksamkeit vertikal
Landschaft	Breiter als hoch	Videos, Karten, Dashboards, breite Szenen	Zeigt mehr horizontalen 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 normalerweise. Es reduziert Seiteninhalte und fördert eine top-unterschriebene Fluss. Deshalb fühlen sich soziale Feeds, Artikelseiten, Onboarding-Schritte und Chat-Interfaces in Portrait normalerweise sauberer an.

Die horizontale Orientierung tut das Gegenteil. Es offenbart mehr Breite, was bei der Verwendung von Split-Views, Zeitleisten, Galerien, Medienwiedergabe, datenreichen Oberflächen und immersiven Ansichten hilft. Wenn Ihr Layout eine Seiten-an-Seiten-Vergleich benötigt, gibt diese horizontale Form oft mehr Platz.

Portrait ist normalerweise über die Fokussierung. Landschaft ist normalerweise über Kontext.

Was ändert sich für den Entwickler

Der größte Fehler ist, die breitere Form als eine gestreckte Version von Portrait zu behandeln. Es ist nicht. Die Informationshierarchie muss oft geändert werden.

Beispielsweise:

In Portrait-Modus, in einem Dashboard stapeln sich Karten in einer Spalte.
Bei einer breiteren Ausrichtung, das gleiche Dashboard könnte sich auf mehrere Spalten und die Anzeige von Filtern oder Seitenbereichen umstellen.
In Portrait-Modus, eine Zahlungsanzeige könnte große Zielgrößen priorisieren und einen klaren Ablauf anbieten.
Bei einer breiteren Ausrichtung, dasselbe Bildschirm kann sich unangenehm anfühlen, wenn Felder zu sehr komprimiert werden.

Entwickler, die an immersiven mobilen Layouts arbeiten, müssen auch an der Kantenverarbeitung, den sicheren Bereichen und dem Vollbildverhalten denken. Wenn Sie sich auf diese Details einlassen, Capacitor Ein Rand-zu-Rand-Anzeige-Setup ist Teil derselben Konversation, da sich die Ausrichtung auf die verfügbare Fläche auswirkt.

Gemeinsame Anwendungsfälle in verschiedenen Medien

Portrait-Orientierung erscheint an mehreren Orten als Mobilbildschirme. Das zählt, weil der Begriff nicht in der Software begann und nicht nur der Software gehört.

Ein genauer Blick auf eine Person, die mit einem Smartphone durch soziale Medien scrollt.

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.

Die Druckdesign auch verlässt sich auf Portrait, wenn die Leseerfahrung von oben nach unten in einer engen Spalte verlaufen 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.

Wenn Sie ein PDF exportiert haben und bemerkt haben, dass ein breites Tabelle plötzlich unleserlich wird, haben Sie die Grenze von Portrait gesehen. Einige Inhalte sind besser in einer horizontalen Formatierung dargestellt. Der Schlüssel ist, die Rahmenform mit der Inhaltsstruktur abzugleichen.

Mobile Produkte und App-Flows

Unter diesen Umständen wird Portrait zum Standardmentalmodell für viele Teams.

{"targetLanguage":"German","protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"texts":["Chat apps:","messages stack vertically.","Social apps:","posts, comments, 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.","Diese Muster sind keine Zufälle. Portrait unterstützt eine-handige Bedienung, Daumen scrollen und lineare Aufgabenabwicklung.","Ein Großteil der mobilen UI fühlt sich intuitiv an, weil die Schnittstelle an eine aufrechte Geräte vorher an alles andere glaubt.","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 Aufgabenablauf ist Portrait normalerweise der Ausgangspunkt.","Orientierung auf der Webseite handhaben"]} {"targetLanguage":"German","protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"texts":["Chat apps:","messages stack vertically.","Social apps:","posts, comments, 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.","Diese Muster sind keine Zufälle. Portrait unterstützt eine-handige Bedienung, Daumen scrollen und lineare Aufgabenabwicklung.","Ein Großteil der mobilen UI fühlt sich intuitiv an, weil die Schnittstelle an eine aufrechte Geräte vorher an alles andere glaubt.","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 Aufgabenablauf ist Portrait normalerweise der Ausgangspunkt.","Orientierung auf der Webseite handhaben"]}
{"targetLanguage":"German","protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"texts":["Chat apps:","messages stack vertically.","Social apps:","posts, comments, 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.","Diese Muster sind keine Zufälle. Portrait unterstützt eine-handige Bedienung, Daumen scrollen und lineare Aufgabenabwicklung.","Ein Großteil der mobilen UI fühlt sich intuitiv an, weil die Schnittstelle an eine aufrechte Geräte vorher an alles andere glaubt.","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 Aufgabenablauf ist Portrait normalerweise der Ausgangspunkt.","Orientierung auf der Webseite handhaben"]} {"targetLanguage":"German","protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"texts":["Chat apps:","messages stack vertically.","Social apps:","posts, comments, 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.","Diese Muster sind keine Zufälle. Portrait unterstützt eine-handige Bedienung, Daumen scrollen und lineare Aufgabenabwicklung.","Ein Großteil der mobilen UI fühlt sich intuitiv an, weil die Schnittstelle an eine aufrechte Geräte vorher an alles andere glaubt.","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 Aufgabenablauf ist Portrait normalerweise der Ausgangspunkt.","Orientierung auf der Webseite handhaben"]}
{"targetLanguage":"German","protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"texts":["Chat apps:","messages stack vertically.","Social apps:","posts, comments, 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.","Diese Muster sind keine Zufälle. Portrait unterstützt eine-handige Bedienung, Daumen scrollen und lineare Aufgabenabwicklung.","Ein Großteil der mobilen UI fühlt sich intuitiv an, weil die Schnittstelle an eine aufrechte Geräte vorher an alles andere glaubt.","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 Aufgabenablauf ist Portrait normalerweise der Ausgangspunkt.","Orientierung auf der Webseite handhaben"]} {"targetLanguage":"German","protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"texts":["Chat apps:","messages stack vertically.","Social apps:","posts, comments, 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.","Diese Muster sind keine Zufälle. Portrait unterstützt eine-handige Bedienung, Daumen scrollen und lineare Aufgabenabwicklung.","Ein Großteil der mobilen UI fühlt sich intuitiv an, weil die Schnittstelle an eine aufrechte Geräte vorher an alles andere glaubt.","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 Aufgabenablauf ist Portrait normalerweise der Ausgangspunkt.","Orientierung auf der Webseite handhaben"]}
{"targetLanguage":"German","protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"texts":["Chat apps:","messages stack vertically.","Social apps:","posts, comments, 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.","Diese Muster sind keine Zufälle. Portrait unterstützt eine-handige Bedienung, Daumen scrollen und lineare Aufgabenabwicklung.","Ein Großteil der mobilen UI fühlt sich intuitiv an, weil die Schnittstelle an eine aufrechte Geräte vorher an alles andere glaubt.","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 Aufgabenablauf ist Portrait normalerweise der Ausgangspunkt.","Orientierung auf der Webseite handhaben"]} {"targetLanguage":"German","protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"texts":["Chat apps:","messages stack vertically.","Social apps:","posts, comments, 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.","Diese Muster sind keine Zufälle. Portrait unterstützt eine-handige Bedienung, Daumen scrollen und lineare Aufgabenabwicklung.","Ein Großteil der mobilen UI fühlt sich intuitiv an, weil die Schnittstelle an eine aufrechte Geräte vorher an alles andere glaubt.","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 Aufgabenablauf ist Portrait normalerweise der Ausgangspunkt.","Orientierung auf der Webseite handhaben"]}

{"targetLanguage":"German","protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"texts":["Chat apps:","messages stack vertically.","Social apps:","posts, comments, 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.","Diese Muster sind keine Zufälle. Portrait unterstützt eine-handige Bedienung, Daumen scrollen und lineare Aufgabenabwicklung.","Ein Großteil der mobilen UI fühlt sich intuitiv an, weil die Schnittstelle an eine aufrechte Geräte vorher an alles andere glaubt.","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 Aufgabenablauf ist Portrait normalerweise der Ausgangspunkt.","Orientierung auf der Webseite handhaben"]}

{"targetLanguage":"German","protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"texts":["Chat apps:","messages stack vertically.","Social apps:","posts, comments, 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.","Diese Muster sind keine Zufälle. Portrait unterstützt eine-handige Bedienung, Daumen scrollen und lineare Aufgabenabwicklung.","Ein Großteil der mobilen UI fühlt sich intuitiv an, weil die Schnittstelle an eine aufrechte Geräte vorher an alles andere glaubt.","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 Aufgabenablauf ist Portrait normalerweise der Ausgangspunkt.","Orientierung auf der Webseite handhaben"]}

{"targetLanguage":"German","protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"texts":["Chat apps:","messages stack vertically.","Social apps:","posts, comments, 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.","Diese Muster sind keine Zufälle. Portrait unterstützt eine-handige Bedienung, Daumen scrollen und lineare Aufgabenabwicklung.","Ein Großteil der mobilen UI fühlt sich intuitiv an, weil die Schnittstelle an eine aufrechte Geräte vorher an alles andere glaubt.","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 Aufgabenablauf ist Portrait normalerweise der Ausgangspunkt.","Orientierung auf der Webseite handhaben"]}

Aus einem kleinen Web-Bug wird ein großer. Ihre App liest sich sauber in einem aufrechten Bildschirm, dann dreht der Benutzer das Gerät und die Grafik überläuft, der Seitenleiste erscheint an falschem Breakpoint oder die Tastatur bedeckt den Absenden-Button. Die Orientierung im Web ist wirklich um den Zustand. Die Form des Bildschirmes hat sich geändert, und Ihre UI muss auf vorhersehbare Weise reagieren.

Für Entwickler bedeutet dies, zwei Aufgaben zu trennen. CSS handhabt die Layout-Änderungen. JavaScript handhabt die Verhaltensänderungen. Wenn Sie das gleiche Projekt später für mobile Geräte paketieren, bleibt diese Web-Schicht relevant. Mit Capacitor wird eine Web-App in eine mobile App umgewandelt entfaltet dies nicht die Notwendigkeit für eine gute Web-Orientierungshandhabung. Es macht diese Grundlage noch wichtiger.

Die Plattform bietet Ihnen zwei Hauptwerkzeuge. Die Screen Orientation API gibt die Orientierungstypen und -änderungen an, und das Web App Manifest lässt eine installierte App eine bevorzugte aufrechte Modus wie , oder , angeben. MDN dokumentiert diese Manifest-Werte in seiner Web App Manifest-Orientierungshinweis portrait, portrait-primaryVerwenden Sie CSS, wenn die Layout-Änderungen angepasst werden sollen portrait-secondaryBeginnen Sie 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. Beginnen Sie mit der engen, aufrechten Layout als Standard. Dann fügen Sie Platz für sekundäre UI nur dann hinzu, wenn der Bildschirm breiter wird..

Einige Praktiken sparen Ihnen Zeit später:

Die Web App Manifest-Orientierungshinweis von MDN

/* 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;
  }
}

Die Web App Manifest-Orientierungshinweis von MDN

Starten Sie von Ihrer primären Modus: Wenn Menschen die App hauptsächlich aufrecht verwenden, machen Sie das die Grundlayout.
Vermeiden Sie fixe Höhen: Ein Gerät drehen kann den nutzbaren 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 oft bei der Drehung, 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 Drehung die Datenpräsentation oder die Interaktionslogik ändert, sollte JavaScript reagieren. Wenn die Drehung nur Platzierung oder Anordnung ändert, sollte CSS sie 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

If Ihre PWA ist hauptsächlich für die Aufrechteinstellung konzipiert, deklarieren Sie das im Manifest.

{
  "name": "My App",
  "short_name": "MyApp",
  "display": "standalone",
  "orientation": "portrait"
}

Dies ist eine Vorliebe und kein Ersatz für eine responsive Gestaltung. 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 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 zu sperren, wenn die Rotation das eigene Task selbst brechen würde, wie eine geführte Aufnahmefluss oder eine Bildschirm mit strengen physischen Ausrichtungsanforderungen. In den meisten anderen Fällen ist die Anpassung der Schnittstelle die bessere Ingenieursentscheidung, da sie sowohl das Gerät als auch den Benutzer respektiert.

Orientierung in mobilen Apps verwalten

Mobilen Apps können mehr tun als ein Browserfenster. Sie können eine Standardbildschirmrichtung auf der App-Ebene deklarieren und dann die Verhaltensweise für einen einzelnen Bildschirm ändern, wenn der Task 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.

Bildschirmfoto von https://capgo.

Ein gutes mentales Modell hilft hier. App-weite Einstellungen sind Ihre Standardpolitik. Bildschirm-basierte code ist die Ausnahmeebene. 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 Plattformkontrolle

An Android, die Orientierung wird oft im Manifest gesetzt 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 in der gesamten Aktivität. Der Kompromiss ist der Umfang. Wenn nur eine Seite die Hochformatmodus benötigt, ist die globale Anwendung dieses Regels normalerweise zu brutal.

An iOS, unterstützte Orientierungen werden in Xcode über Zielgruppeneinstellungen und Anwendungsdaten gesetzt. Sie können definieren, was die App im Allgemeinen zulässt, und dann das Verhalten in bestimmten View-Controllern feinjustieren, wenn eine Seite strengere Anforderungen hat.

Diese Aufteilung 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, in der Nähe der Route oder des Views, der sie benötigt. Eine Anmeldeseite mag in Portrait einfacher zu bedienen sein. Eine Mediensicht oder eine Kamera-Fluss mag aufgrund der Haltung des Geräts die Rotation erlauben müssen.

Ein Plugin hält diese Logik lesbar und vermeidet es, dass es zu einer Anpassung an die native Infrastruktur kommt. Das Capacitor-Orientierung-Plugin für Capacitor-Apps lässt Sie die aktuelle Orientierung lesen, eine Einschränkung für eine bestimmte Modus wie Portrait anwenden und diese Einschränkung entfernen, wenn der Benutzer wieder auf eine flexible Seite zurückkehrt.

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. Die Einschränkung anwenden, wenn die Seite aktiv wird. Die Einschränkung entfernen, wenn die Seite nicht mehr aktiv ist. In einer router-basierten App bedeutet dies oft, die Orientierungsänderungen an die Seite-Lifecycle-Hooks zu binden und nicht über zufällige Komponenten aufzuteilen.

Wählen Sie die Bildschirm-spezifischen Einschränkungen sorgfältig aus

Verwenden Sie einen festen Hochformatmodus, wenn die Rotation die Eingabe, die Ausrichtung oder den Benutzerfokus stören würde.

Häufige Beispiele umfassen:

Authentifizierungsanzeige: 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 Schnittstelle benötigt eine konsistente Darstellung.

Lasst das Gerät frei rotieren, wenn zusätzlicher Breite oder ein anderes Greifen offensichtlich dem Task hilft.

Typische Beispiele umfassen Medienabspiel, Karten, Spiele, Kameraansichten und dichte Datenanzeigen.

Eine nützliche Regel für Junior-Teams ist einfach. Wenn die Änderung der Gerätedirektion nur die Abstände ändern würde, lasst das Layoutsystem es handhaben. Wenn die Änderung der Gerätedirektion wie der Task funktioniert, dann kann die Bildschirm-basierte Orientierung code gerechtfertigt werden.

Capgo wird hier aus praktischen Gründen erwähnt. 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 sie wie eine Funktion. Halten Sie die Standardflexibilität bei, 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 Entscheidung für die Benutzererfahrung (UX) an erster Stelle und eine technische Entscheidung an zweiter Stelle. Der code ist in der Regel unkompliziert. Die schwierige Sache ist die Wahl einer Funktion, die natürlich wirkt.

Ein kurzer Checkliste hilft:

Entwickeln Sie für den dominanten Kontext: Wenn die meisten Benutzer aufrecht beginnen, machen Sie das Portrait die stärkste Version der Schnittstelle.
Unterstützen Sie ein breiteres Anzeigemodus, wenn es Wert hinzufügt: Blockieren Sie die Rotation nicht auf Bildschirmen, die von einer größeren Breite profitieren.
Sperren 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: Die Benutzer sollten keine Eingaben, Scrollpositionen oder ausgewählten Registerkarten verlieren.
Testen Sie beide Orientierungen auf echten Geräten: Simulatoren verpassen unangenehme Übergänge, Tastaturüberschneidungen und sicherheitsrelevante Bereiche.

Für umfassendere Layoutentscheidungen Quer- und Längsrichtlinien für Capacitor-Anwendungen passen gut zu der Orientierungstestung, da die gleiche Anzeige oft so gestaltet werden muss, dass sie auf verschiedenen Geräten und Plattformen nativ aussieht.

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 Capacitor-Anwendungen liefern und kontrollierte Orientierungsbahavior benötigen, zusammen mit schnellen Nachlieferungen nach der Veröffentlichung, Capgo ist einen Blick wert. Es bietet live Aktualisierungen für CapacitorJS- und Electron-Anwendungen und hält auch Plugins für Anwendungsfähigkeiten wie die Bildschirmorientierung bereit, die Ihnen helfen können, wenn Sie bestimmte Ansichten sperren oder aktivieren möchten, ohne Ihr gesamtes Releaseprozess neu zu erstellen.

Was ist eine Portrait-Orientierung: Leitfaden für 2026