orientation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die orientation CSS Media-Feature kann verwendet werden, um die Ausrichtung des Viewports (oder des Seitenrahmens bei paged media) zu testen.

Hinweis: Diese Funktion entspricht nicht der Geräte-Ausrichtung. Das Öffnen der Soft-Tastatur auf vielen Geräten im Hochformat führt dazu, dass der Viewport breiter als hoch wird, wodurch der Browser Landschaftsstile anstelle von Hochformat verwendet.

Syntax

Das Feature orientation wird als Schlüsselwortwert, ausgewählt aus der folgenden Liste, angegeben.

Schlüsselwortwerte

portrait

Der Viewport befindet sich in Hochformat-Ausrichtung, d.h. die Höhe ist größer oder gleich der Breite.

landscape

Der Viewport befindet sich in Querformat-Ausrichtung, d.h. die Breite ist größer als die Höhe.

Beispiele

Hochformat-Ausrichtung

In diesem Beispiel haben wir drei Boxen im HTML und verwenden das orientation Media-Feature, um zwischen einer Zeilen-Layout (im Querformat) und einem Spalten-Layout (im Hochformat) zu wechseln.

Die Beispielausgabe ist in ein <iframe> eingebettet, dessen Höhe größer als seine Breite ist, sodass die Boxen ein Spalten-Layout erhalten.

HTML

html
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

CSS

css
body {
  display: flex;
}

div {
  background: yellow;
  width: 200px;
  height: 200px;
  margin: 0.5rem;
  padding: 0.5rem;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

Ergebnis

Querformat-Ausrichtung

Dieses Beispiel hat genau denselben Code wie das vorherige Beispiel: Es hat drei Boxen im HTML und verwendet das orientation Media-Feature, um zwischen einer Zeilen-Layout (im Querformat) und einem Spalten-Layout (im Hochformat) zu wechseln.

Allerdings ist in diesem Beispiel die Beispielausgabe in ein <iframe> eingebettet, dessen Höhe kleiner als seine Breite ist, sodass die Boxen ein Zeilen-Layout erhalten.

HTML

html
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

CSS

css
body {
  display: flex;
}

div {
  background: yellow;
  width: 200px;
  height: 200px;
  margin: 0.5rem;
  padding: 0.5rem;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

Spezifikationen

Specification
Media Queries Level 4
# orientation

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
orientation media feature

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support