Window.orientation — Eigenschaft · JavaScript-Referenz

Signatur

Window.orientation

Beschreibung

window.orientation ist eine schreibgeschützte, veraltete Eigenschaft, die angibt, um wie viel Grad der Viewport gegenüber der natürlichen Ausrichtung des Geräts gedreht ist. Mögliche Werte sind 0 (natürliche Ausrichtung, bei Smartphones meist Hochformat), 90 (gegen den Uhrzeigersinn gedreht, Querformat), -90 (im Uhrzeigersinn gedreht, Querformat) und 180 (auf dem Kopf stehend, wird von vielen Geräten nicht gemeldet).

Die Eigenschaft stammt aus der Anfangszeit des mobilen Webs (iOS Safari) und wurde zusammen mit dem Event orientationchange genutzt, um Layouts beim Drehen des Geräts anzupassen. Sie war nie Teil eines regulären Standards, sondern wird nur im Kompatibilitätsstandard beschrieben. Desktop-Browser wie Chrome und Firefox auf dem Desktop liefern undefined.

Für neuen Code sollte stattdessen die Screen Orientation API (screen.orientation.angle und screen.orientation.type) oder – für reine Layout-Fragen – eine Media Query wie (orientation: portrait) über window.matchMedia() verwendet werden. window.orientation ist nur noch als Fallback für alte iOS-Versionen (vor iOS 16.4) sinnvoll.

Rückgabewert

Typ

number | undefined

Beschreibung

Drehwinkel in Grad: 0, 90, -90 oder 180. In Browsern ohne Unterstützung undefined.

Beispiele

Aktuelle Ausrichtung auslesen (mit Feature-Erkennung)

const getAngle = () => {
  // Moderne API bevorzugen, alte Eigenschaft nur als Fallback
  if (screen.orientation && typeof screen.orientation.angle === 'number') {
    return screen.orientation.angle;
  }
  if (typeof window.orientation === 'number') {
    // window.orientation liefert -90 statt 270
    return (window.orientation + 360) % 360;
  }
  return 0;
};

console.log(`Drehung: ${getAngle()}°`);

Drehung: 90° (z. B. im Querformat auf einem Smartphone)

Hoch- oder Querformat bestimmen

const isLandscape = () => {
  if (typeof window.orientation === 'number') {
    return Math.abs(window.orientation) === 90;
  }
  // Fallback über Media Query
  return window.matchMedia('(orientation: landscape)').matches;
};

document.body.classList.toggle('landscape', isLandscape());
console.log(isLandscape() ? 'Querformat' : 'Hochformat');

Hochformat

Auf Drehung reagieren (alt und modern)

const update = () => {
  const angle = screen.orientation?.angle ?? window.orientation ?? 0;
  console.log('Neue Ausrichtung:', angle);
};

if (screen.orientation) {
  screen.orientation.addEventListener('change', update);
} else {
  // Veraltetes Event, z. B. für iOS < 16.4
  window.addEventListener('orientationchange', update);
}

Neue Ausrichtung: 90

// Wichtig · Fallstricke

Veraltet: Nicht für neuen Code verwenden. Ersatz: screen.orientation.angle / screen.orientation.type oder matchMedia('(orientation: portrait)').
Kompatibilität: Nur in mobilen Browsern verfügbar (Safari iOS, Chrome/Samsung Internet auf Android). Desktop-Browser und Firefox liefern meist undefined – immer mit typeof window.orientation === 'number' prüfen.
Wertebereich: Im Uhrzeigersinn gedreht ergibt -90, nicht 270 wie bei screen.orientation.angle. Beim Umrechnen (wert + 360) % 360 verwenden.
Natürliche Ausrichtung: 0 bedeutet nicht zwingend Hochformat – bei vielen Tablets ist die natürliche Ausrichtung das Querformat.
Der Wert 180 wird auf vielen Smartphones nie gemeldet, da das Betriebssystem die Kopfüber-Drehung unterdrückt.
Beim orientationchange-Event sind innerWidth/innerHeight teilweise noch nicht aktualisiert; für Maßangaben besser auf resize reagieren.

Siehe auch

Notification.requireInteraction Window.location Window.navigation Window.origin Window.screenTop