Portrait orientation bedeutet, dass der Bildschirm höher als breit ist (Höhe ist größer als Breite). Landscape orientation ist das Gegenteil: breiter als hoch. Typische Hochformat-Anwendungen sind Smartphone-Feeds, Artikel, Formulare und Chats. Querformat eignet sich für Videos, Karten und Dashboards, die horizontalen Platz benötigen. Das Seitenverhältnis (z. B. 9:16 Hochformat oder 16:9 Querformat) beschreibt das Verhältnis von Breite zu Höhe; die Ausrichtung gibt nur an, welche Seite länger ist.
Beispiel: Hochformat vs. Querformat
Wenn du nach einem Bild zum Hochformat gesucht hast, ist diese nebeneinander angeordnete Ansicht die Idee: ein hoher Rahmen und ein breiter Rahmen auf derselben Geräteklasse.
Hochformat lenkt die Aufmerksamkeit in ein vertikales Scrollen. Querformat zeigt mehr Spalten und nebeneinander angeordnete UI-Elemente. Es handelt sich um Layout-Kontexte, nicht nur um Rotationsbezeichnungen.
| Ausrichtung | Form | Häufige Anwendungen |
|---|---|---|
| Hochformat | Höher als breit | Feeds, Leseansichten, Formulare, Chats |
| Querformat | Breiter als hoch | Video, Karten, Diagramme, Spiele |
Orientation ist nicht dasselbe wie Auflösung oder Seitenverhältnis. Zwei Geräte können beide im Hochformat sein, aber unterschiedliche Pixelgrößen und Verhältnisse verwenden. Responsive Layouts sollten sich an der Viewport-Form orientieren, nicht an einem einzelnen Smartphone-Modell.
Portrait orientation in CSS
Verwende CSS, wenn die Rotation Abstände oder Struktur ändern soll. Die @media (orientation: portrait) query entspricht Viewports, deren Höhe größer ist als die Breite. MDN dokumentiert dies unter Media-Features zur Ausrichtung.
/* Default: portrait-first single column */
.page {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.sidebar {
display: none;
}
@media (orientation: landscape) {
.page {
grid-template-columns: 280px 1fr;
}
.sidebar {
display: block;
}
}
@media (orientation: portrait) {
.hero {
padding-block: 24px;
}
}Beginne mit der Ausrichtung, die die meisten Nutzer zuerst sehen, und ergänze dann Landscape-Regeln. Vermeide feste Viewport-Höhen, die brechen, wenn Tastatur oder Browser-Chrome erscheint. Teste Formulare und Sticky Header in beiden Ausrichtungen auf echter Hardware.
Für JavaScript, das auf Rotation reagieren muss (Charts, Maps, Custom Shells), nutze screen.orientation Change-Events oder vergleiche window.innerHeight zu window.innerWidth. Bevorzuge CSS für das Layout, wo immer möglich.
Ausrichtung in Mobile- und Capacitor-Apps sperren
Browser behandeln den Orientation Lock als Präferenz. Native Apps und Capacitor Projekte können die Bildschirmrichtung pro Screen erzwingen, wenn Rotation den Workflow stört (Login, Payment, Kiosk-Flows).
Der @capgo/capacitor-screen-orientation Plugin liest den aktuellen Modus, sperrt Portrait für eine Route und entsperrt beim Verlassen des Screens. Details im Dokumentation des Screen Orientation Plugins für API Details.
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
await ScreenOrientation.lock({ orientation: 'portrait' });
const { type } = await ScreenOrientation.orientation();
console.log(type);
await ScreenOrientation.unlock();Sparsam sperren. Wenn die Drehung nur den Abstand ändert, passe das Layout an. Wenn du doch sperrst, verbinde lock und unlock mit dem Seitenlebenszyklus, damit Medien- und Einstellungsbildschirme weiterhin Querformat nutzen können. Für breitere Layout-Muster auf iOS und Android siehe Cross-Platform UI- und UX-Best-Practices für Capacitor Apps.
FAQ
Was ist das Hochformat (Portrait)?
Das Hochformat bedeutet, dass das Display höher als breit ist. Die Höhe ist größer als die Breite, sodass die langen Kanten vertikal verlaufen. Smartphones, die aufrecht zum Lesen, Chatten oder Scrollen gehalten werden, sind meist im Hochformat.
Was ist der Unterschied zwischen Hochformat und Querformat?
Hochformat ist höher als breit, Querformat breiter als hoch. Dasselbe Gerät wechselt beim Drehen zwischen beiden, aber Seitenverhältnis und Layout-Platz ändern sich, deshalb sollte sich die UI anpassen statt nur gestreckt zu werden.
Wie verwende ich @media (orientation: portrait) in CSS?
Füge eine Media Query mit @media (orientation: portrait) { ... } hinzu, um Styles anzuwenden, wenn die Viewport-Höhe die Breite überschreitet. Kombiniere sie mit Layout-Regeln fürs Querformat mittels @media (orientation: landscape) wenn du beide Formate brauchst.
Was bedeutet „Ausrichtung ändern“ bei einem Smartphone oder einer App?
Die Ausrichtung zu ändern heißt, das Gerät zu drehen oder der App das Drehen zu erlauben, sodass der Bildschirm zwischen Hochformat und Querformat wechselt. Im Web tauschen die Viewport-Dimensionen die Plätze. In nativen und Capacitor Apps kann das OS den Übergang zusätzlich animieren und die Safe Areas aktualisieren.
Was ist die Inhaltsausrichtung?
Die Inhaltsausrichtung beschreibt, wie Inhalte im Rahmen angeordnet sind, nicht nur, wie das Gerät gehalten wird. Ein Hochformat-Bildschirm kann beispielsweise ein breites Diagramm oder ein Video mit schwarzen Balken anzeigen. Passen Sie Layout und Medien an die Aufgabe an, nicht nur an den Standardwinkel des Geräts.
Können Sie ein Beispiel für Hoch- und Querformat zeigen?
Ja. Hochformat sieht aus wie ein hoher Handyrahmen, bei dem die Höhe größer ist als die Breite. Querformat sieht aus wie ein breiter Rahmen, bei dem die Breite größer ist als die Höhe. Scrollen Sie zum Diagramm unter Beispiel Hoch- vs. Querformat für ein beschriftetes Bild.
Wenn Sie Capacitor-Apps veröffentlichen und neben schnellen Fixes nach dem Release ein kontrolliertes Ausrichtungsverhalten benötigen, Capgo lohnt einen Blick. Es bietet Live Updates für CapacitorJS- und Electron-Apps und pflegt zudem Plugins für App-Funktionen wie die Bildschirmausrichtung. Das hilft, wenn du bestimmte Ansichten sperren oder aktivieren musst, ohne deinen gesamten Release-Prozess neu aufzubauen.
