Die Bildschirmorientierung beschreibt, ob ein Gerät im Hochformat oder im Querformat genutzt wird. Der Browser leitet sie aus dem Seitenverhältnis des Viewports ab: Ist er höher als breit, gilt portrait, ansonsten landscape. Für dein Layout ist die Orientierung eine Information, die du abfragen darfst. Sie festzuschreiben ist aus Gründen der Barrierefreiheit in fast allen Fällen ausgeschlossen.
- Bildschirmorientierung
Ausrichtung des Bildschirms im Hochformat oder im Querformat, die sich ändert, sobald der Nutzer das Gerät dreht.
Beispiel: „Im Querformat passen zwei Spalten nebeneinander, im Hochformat stapeln sie sich.“Auch: Screen Orientation, Displayausrichtung. Die englischen Werte portrait und landscape sind in CSS und JavaScript die eigentlichen Bezeichner.
Achtung: Die CSS-Abfrage orientation meint das Seitenverhältnis des Viewports und nicht die Lage des Geräts im Raum. Ein schmal gezogenes Desktop-Fenster meldet portrait, obwohl der Monitor quer auf dem Tisch steht.
Wie du die Orientierung abfragst
Die Media Query orientation kennt genau zwei Werte. Der Browser vergleicht dafür Breite und Höhe des Viewports und liefert bei exakt quadratischem Viewport den Wert landscape.
@media (orientation: landscape) {
.bildergalerie { grid-template-columns: repeat(2, 1fr); }
}In JavaScript gibt screen.orientation zusätzlich den Winkel und den genauen Typ heraus, etwa portrait-primary. Gebraucht wird das selten. Für Layoutfragen reicht die Media Query, und häufig kommst du sogar ohne sie aus, weil eine Abfrage der Viewport-Breite dieselbe Information brauchbarer verpackt.
Warum Erzwingen im Web ausfällt
WCAG 2.2 verlangt in Erfolgskriterium 1.3.4, dass Inhalte in beiden Ausrichtungen bedienbar bleiben, solange eine bestimmte Ausrichtung nicht zwingend zur Sache gehört. Der Grund ist handfest: Wer sein Tablet fest an einem Rollstuhl montiert hat, kann es nicht drehen. Über die europäische Norm EN 301 549 wirkt dieses Kriterium bis in die Anforderungen des BFSG hinein.
Technisch käme man ohnehin nicht weit. Die Methode screen.orientation.lock() greift nur im Vollbildmodus und wird von Safari auf dem iPhone nicht unterstützt. Das Feld orientation im Web-App-Manifest wirkt erst, wenn jemand die Seite als App installiert hat.
Was stattdessen funktioniert
Baue das Layout so, dass es in beiden Lagen trägt. Im Querformat steht mehr Breite und weniger Höhe zur Verfügung, was vor allem fixierte Leisten und hohe Formulare unter Druck setzt. Eine Kopfzeile, die im Hochformat angenehm wirkt, frisst im Querformat schnell ein Drittel des sichtbaren Bereichs.
Wo eine Ansicht wirklich Breite braucht, etwa bei einer sehr weiten Tabelle oder einem Zeichenwerkzeug, ist ein Hinweis der richtige Weg. Du blendest im Hochformat einen Satz ein, der zum Drehen einlädt, und lässt den Inhalt trotzdem erreichbar. Das funktioniert in der Praxis besser als jede Sperre, weil niemand ausgeschlossen wird.