Sie drehen Ihr Telefon, um eine Anzeige zu testen, und die Layouts passen sich sauber an oder zerfallen. Der Text fließt um, die Schaltflächen springen, ein Modalfenster bedeckt plötzlich das falsche Gebiet oder Ihr Videoplayer verhält sich genau so, wie erwartet. In diesem kleinen Moment wird portrait-Orientierung stoppt, eine Designbegriff zu sein und wird zu einem Produktentscheid.
Wenn Sie für mobile Geräte bauen, benötigen Sie eine klare Antwort auf was ist eine Portrait-Orientierung. Nicht nur die Schuldefinition, sondern die Entwicklerversion. Wie es sich auf das Layout auswirkt, wann Sie Rotation unterstützen sollten, wann Sie es festlegen sollten und wie Sie es in Webanwendungen, native Apps und Capacitor Projekten ohne eine brüchige Benutzeroberfläche handhaben können.
Tabelle der Inhalte
- Portraitorientierung verstehen
- Portrait vs Landschaft: Eine grundlegende Vergleichsübersicht
- Gemeinsame Anwendungsfälle in verschiedenen Medien
- Die Ausrichtung auf der Webseite handhaben
- Orientierung in mobilen Apps verwalten
- Benutzererfahrung für Bildschirmorientierung
Portraitorientierung verstehen
Benutzer bemerken die Orientierung zuerst, wenn sich das Bildschirmrotiert. Entwickler bemerken sie, wenn diese Rotation ihre Schnittstelle zerstört.
Portraitorientierung bedeutet, dass das Rahmen ist länger als es breit ist. Das ist die Kernidee. Sie kommt aus der visuellen Kunst, wo Porträts von einem Menschen Gesicht und Oberkörper normalerweise vertikal gerahmt wurden. Das gleiche Konzept führte in die Seite Gestaltung, Fotografie und digitale Schnittstellen. Ein gutes Referenz für die breitere Geschichte ist Wikipedia's Übersicht zur Bildschirmorientierung.
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 Portrait.
Werum es in der Produktarbeit wichtig ist
Portrait wurde zu einem praktischen Standard für Mobilgeräte, weil die aufrechte Verwendung mit der natürlichen Art, wie Menschen Smartphones halten, übereinstimmt. Das beeinflusst das Scrollen, die Daumenreichweite, die Lesefluss, die Formgestaltung und die Platzierung der Navigation.
A feed, article view, settings screen, or chat thread usually reads more naturally in a vertical frame. That’s one reason orientation choices connect directly to , nicht nur mit der visuellen Gestaltung.nicht nur visuelle Gestaltung.
Praktische Regel: Praktische Regel: Behandle Portrait als Layoutkontext, nicht nur als Geräteposition.
Wo sich Junior-Entwickler oft verheddern
Die übliche Verwirrung besteht darin, Orientierung mit Auflösung oder BildverhältnisSie sind verwandt, aber nicht dasselbe.
- Orientation bedeutet, welche Seite länger ist.
- Resolution Auflösung bedeutet, wie viele Pixel in jeder Dimension existieren.
- Breitenverhältnis beschreibt die Beziehung zwischen Breite und Höhe.
Eine Tabelle in Portrait und ein Handy in Portrait können sehr unterschiedliche Dimensionen haben, aber sie teilen trotzdem denselben Orientierungsstatus. Deshalb sollte responsives Benutzeroberflächencodelement fragen: ‘Ist Höhe größer als Breite?’ bevor es etwas Spezifischeres fragt.
Portrait vs Landschaft: Eine grundlegende Vergleichsübersicht
Eine einfache Möglichkeit, dies zu verstehen, ist durch Komposition. Ein Porträtgemä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 UI-Design, ist die Portrait-Orientierung das Rechteck, in dem Höhe die Breite übersteigt, also sind die längeren Kanten vertikal. Das ist das Gegenteil der horizontalen Orientierung. Die SLR Lounge-Glossar-Einträge beschreiben diese technische Definition und warum die Form für hohes Objekte und vertikale Struktur geeignet ist.
Die Unterschiede in einer Tabelle
| Orientierung | Form | Beste Passform | Häufiger Effekt |
|---|---|---|---|
| Typischer Effekt | Höher als breit | Fütterungen, Formulare, Lesen, hohe Themen | Füttert, Formulare, Lesen, hohe Themen |
| Landscape | Breiter als hoch | Video, Karten, Dashboards, breite Szenen | Video, Karten, Dashboards, breite Szenen |
Das klingt grundlegend, aber es ist nützlich, wenn Sie bei Produktbewertungen Kompromisse treffen müssen.
Was ändert sich für den Benutzer
Portrait schmälert die Aufmerksamkeit. Es reduziert die 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, Medienabspiel, datenreichen Oberflächen und immersiven Ansichten hilft. Wenn Ihre Layout-Seite eine Seiten-an-Seiten-Vergleich benötigt, gibt Ihnen 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, die breitere Form als eine gestreckte Version von Portrait zu behandeln. Das ist sie nicht. Die Informationshierarchie muss oft geändert werden.
Beispiel:
- In Portraitstapelt sich ein Dashboard-Karte in eine einzelne Spalte.
- In einer breiteren Orientierungmuss dasselbe Dashboard möglicherweise zu mehreren Spalten und Filtern oder Seitenpanels wechseln.
- In Portrait-Moduseine Zahlungsoption kann große Berührungsziele und einen klaren Ablauf priorisieren.
- In einem breiteren Ausrichtung, dass 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 der Vollbildverhalten denken. Wenn Sie diese Details anpassen Capacitor Rand-zu-Rand-Anzeige-Einstellung gehört zum gleichen Gespräch, weil sich die Ausrichtung auf die verfügbare Fläche auswirkt.
Gemeinsame Anwendungsfälle in verschiedenen Medien
Portrait-Ausrichtung 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. Die vertikale Rahmung passt besser zum Gesicht und Körper einer Person als eine breite Rahmung. 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 fließen 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 liegt nicht daran, dass Portrait immer besser ist. Es liegt daran, dass ein vertikaler Bildschirm 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 Tableau plötzlich unlesbar wird, haben Sie die Grenzen von Portrait gesehen. Einige Inhalte sind besser in einer horizontalen Formatierung dargestellt. Der Schlüssel liegt darin, die Rahmung an die Struktur des Inhalts anzupassen.
Mobile Produkte und App-Flows
In 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.
- Soziale Apps: Beiträge, Kommentare und Reels werden in einer aufrechten Fluss konsumiert.
- Einkaufs-Apps: Sucheergebnisse und Produktlisten scrollen nach unten.
- Banking-Apps: Gleichgewichte, Transaktionen und Bestätigungsabläufe werden üblicherweise in vertikalen Abschnitten angeordnet.
Diese Muster sind keine Zufälle. Portrait unterstützt die Einhändigkeit, das Scrollen mit dem Daumen und die lineare Aufgabenerledigung.
Einige mobile UIs fühlen sich intuitiv an, weil die Oberfläche an eine aufrechte Geräteorientierung 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 alltägliche Aufgabenabläufe ist Portrait normalerweise der Ausgangspunkt.
Umgang mit der Orientierung im Web
Ein häufiges Web-Problem erscheint zunächst klein. Die Anwendung liest sich sauber in einer aufrechten Ansicht, dann dreht der Benutzer das Gerät und die Grafik überläuft, der Seitenleiste erscheint an falschem Breakpoint oder die Tastatur bedeckt den Eingabebutton. Die Orientierung im Web ist wirklich um den Zustand. Die Ansichtsform hat sich geändert, und die Benutzeroberfläche muss auf vorhersehbare Weise reagieren.
Für Entwickler bedeutet das, zwei Aufgaben zu trennen. CSS handhabt die Änderungen der Layouts. JavaScript handhabt die Änderungen der Verhaltensweisen. Wenn Sie das gleiche Projekt für mobile spätere Pakete erstellen, bleibt diese Web-Schicht wichtig. Mit Capacitor eine Webanwendung in eine mobile Anwendung umwandeln entfernt nicht die Notwendigkeit für eine gute Weborientierungshandhabung. Sie macht diese Grundlage noch wichtiger.
Die Plattform bietet Ihnen zwei Hauptwerkzeuge. Das Screen Orientation API gibt die Orientierungstyp und -ereignisse an, und das Web App Manifest ermöglicht es einer installierten App, eine bevorzugte Hochformat-Modus zu deklarieren, wie z.B. portrait, portrait-primary, oder portrait-secondary. MDN dokumentiert diese Manifest-Werte in seinem Web App Manifest orientierung Bezug.
Use CSS when the layout should adapt
Beginnen Sie mit CSS. Es ist der günstigste und zuverlässigste Weg, auf die Wechsel 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 Verbesserung für Bildschirmformate. Beginnen Sie mit der schmalen, aufrechten Layout als Standard. Fügen Sie dann nur dann Platz für sekundäre UI hinzu, wenn das Fenster breiter wird.
Einige Praktiken sparen Ihnen Zeit später:
- Beginnen Sie mit Ihrem Hauptmodus: Wenn die Menschen das App hauptsächlich aufrecht verwenden, sollte das Grundlayout so sein.
- Vermeiden Sie fixe Höhen: Ein Drehgerät kann die verwendbare vertikale Fläche schnell schrumpfen, insbesondere wenn die Browser-UI oder ein virtueller Tastatur ist sichtbar.
- Test interaktive Zustände: Formulare, feste Kopfzeilen und unteren Blätter scheitern häufig bei der Rotation, nicht in statischen Screenshots.
Verwende JavaScript, wenn das Verhalten reagieren muss
CSS can rearrange boxes. It cannot decide when to rebuild a chart or reset a gesture handler.
Verwende JavaScript, wenn die Orientierung Änderungen am Zustandsbasierten UI auslöst.
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 Abstände oder die Platzierung ändert, sollte CSS es handhaben.
Ein praktisches Regel hilft junior Teams, eine Menge Komplexität zu vermeiden. Verwende JavaScript nicht, um Layoutentscheidungen zu erzwingen, die CSS bereits gut handhabt.
Setze eine bevorzugte Orientierung für PWAs
Wenn Ihr PWA hauptsächlich für aufrechte Verwendung konzipiert ist, deklariere 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.
Du kannst 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);
}
}Verwende dies vorsichtig. Eine gute Regel ist, nur zu sperren, wenn die Rotation das eigene Task selbst brechen würde, wie ein geführter Aufnahmeflow oder eine Seite mit strengen physischen Ausrichtungsanforderungen. In den meisten anderen Fällen ist es das bessere Ingenieurswerk, die Schnittstelle anzupassen, da es sowohl dem Gerät als auch dem Benutzer Respekt entgegenbringt.
Orientierung in mobilen Apps verwalten
Mobilanwendungen können mehr tun als ein Browserfenster. Sie können eine Standardbildschirmrichtung auf Anwendungsseite festlegen und dann die Verhaltensweise für einen einzelnen Bildschirm ändern, wenn dies erforderlich ist. 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.
Eine gute mentale Vorstellung 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 sich ein rotierender Gerät mit der Arbeit stören würde, die der Benutzer ausführen möchte.
Native Plattformkontrolle
Für Android, wird die Orientierung oft in AndroidManifest.xml festgelegt 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 in Hochformatmodus benötigt, ist die Anwendung dieser Regel global oft zu unpräzise.
Für iOSUnterstützte Orientierungen werden in Xcode über Ziel-Einstellungen und App-Metadaten festgelegt. Sie können definieren, was die App im Allgemeinen unterstützt, und dann das Verhalten in bestimmten View-Controllern feinjustieren, wenn eine Seite strengere Anforderungen hat.
Dieser Unterschied ist für Cross-Platform-Teams wichtig. Die native Konfiguration antwortet: 'Was sollte diese App im Allgemeinen zulassen?' Die code-Runtime 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 Anmelde-Seite mag in Portrait-Modus einfacher zu bedienen sein. Eine Medienschirm oder eine Kamera-Fluss mag jedoch Rotation basierend auf der Haltung des Geräts zulassen müssen.
Ein Plugin hält diese Logik lesbar und vermeidet benutzerdefinierte native Implementierungen. Capacitor-Bildschirmorientierungs-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, wenn der Benutzer auf eine flexible Seite 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 die Seite aktiv wird. Entfernen Sie sie, wenn die Seite nicht mehr aktiv ist. In einer Router-basierten App bedeutet dies oft, dass Sie die Orientierungsänderungen an den Lifecycle-Hooks der Seite anbinden, anstatt die Aufrufe über zufällige Komponenten zu verteilen.
Wählen Sie die Bildschirmbeschränkungen sorgfältig aus
Verwenden Sie einen fixierten Hochformat, wenn Rotation die Eingabe, die Ausrichtung oder den Benutzerfokus stören würde.
Beispiele hierfür sind:
- Authentifizierungscreens: Die Eingaben bleiben stabil, während der Benutzer tippt.
- Einzahlung und Bestätigungs-Schritte: 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 Greifen offensichtlich hilft, die Aufgabe zu erfüllen.
Typische Beispiele umfassen Medienabspiel, Karten, Spiele, Kamera-Ansichten und dichte Datenanzeigen.
A useful rule for junior teams is simple. If changing device direction would only alter spacing, let the layout system handle it. If changing device direction would change how the task works, then screen-level orientation code may be justified.
Capgo is mentioned here for a practical reason. In Capacitor projects, orientation control is one of those platform features that starts as a small UI detail and quickly becomes app behavior. Treat it like behavior. Keep the default flexible, apply restrictions sparingly, and remove them as soon as the screen no longer needs them.
Benutzergerechte Praktiken für die Bildschirmorientierung
Die Bildschirmorientierung ist eine UX-Entscheidung an erster Stelle und eine technische Entscheidung an zweiter Stelle. Die code ist meistens einfach. Die schwierige Sache ist, Verhaltensweisen zu wählen, die natürlich erscheinen.
Eine kurze Checkliste hilft:
- Entwerfen Sie für den dominanten Kontext: Wenn die meisten Benutzer aufrecht beginnen, machen Sie die Portraitversion der Schnittstelle zur stärksten Version.
- Einen breiteren Anzeigemodus unterstützen, wenn er Wert hinzufügt: Drehung nicht auf Bildschirmen blockieren, die von einer größeren Breite profitieren.
- Nur mit einem klaren Grund sperren: Ein Formular, eine Kasse oder ein sicheres Fluss könnte es rechtfertigen. Eine Inhaltsanzeige tut es normalerweise nicht.
- Den Zustand während der Drehung aufrechterhalten: users shouldn’t lose input, scroll position, or selected tabs.
- Beide Orientierungen auf echten Geräten testen: Simulatoren verpassen unangenehme Übergänge, Tastaturüberschneidungen und sicherheitsrelevante Bereiche.
Für breitere Layoutentscheidungen Plattformübergreifende UI- und UX-Leitlinien für Capacitor-Anwendungen passt gut mit der Orientierungstestung zusammen, weil die gleiche Anzeige oft so fühlen muss, als wäre sie auf verschiedenen Geräten und Plattformen nativ.
Der Hauptnachlass 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 es so.
Wenn Sie Capacitor-Apps liefern und kontrollierte Orientierungsbahavior benötigen, das sich schnell nach der Veröffentlichung reparieren lässt, Capgo ist es wert, einen Blick zu werfen. Es bietet Live-Updates 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üssen, ohne Ihr gesamtes Release-Prozess neu aufzubauen.
