ScreenOrientation.type — Eigenschaft · JavaScript-Referenz

Signatur

ScreenOrientation.type

Beschreibung

Die Eigenschaft type des ScreenOrientation-Interfaces gibt an, wie der Bildschirm gerade ausgerichtet ist. Auf das Objekt greift man über screen.orientation zu. Der Wert gehört immer zum Aufzählungstyp OrientationType:

portrait-primary: Hochformat in der natürlichen Ausrichtung, zum Beispiel ein Smartphone mit den Tasten unten.
portrait-secondary: Hochformat, um 180° gedreht, also auf dem Kopf stehend.
landscape-primary: Querformat in der Grundausrichtung. Bei Desktop-Monitoren ist das der Normalfall.
landscape-secondary: Querformat, um 180° gegenüber landscape-primary gedreht.

Nutzen Sie type, wenn Layout, Steuerung oder Spiellogik von der Ausrichtung abhängen. Beispiele sind Spiele, Kamera-Oberflächen oder Videoplayer. Zusammen mit ScreenOrientation.angle erfahren Sie auch den genauen Drehwinkel. Wenn sich die Ausrichtung ändert, löst das Objekt das Ereignis change aus. Dort können Sie den neuen Wert von type auslesen.

Für reine Layout-Anpassungen sind CSS-Media-Queries wie @media (orientation: portrait) oder matchMedia() meist besser geeignet. type ist dann sinnvoll, wenn Sie in JavaScript zwischen „primary“ und „secondary“ unterscheiden müssen. Media-Queries können das nicht.

Rückgabewert

Typ

"portrait-primary" | "portrait-secondary" | "landscape-primary" | "landscape-secondary"

Beschreibung

Ein String (OrientationType), der die aktuelle Ausrichtung des Bildschirms beschreibt. Die Eigenschaft ist schreibgeschützt.

Beispiele

Aktuelle Ausrichtung auslesen

const { type, angle } = screen.orientation;
console.log(`Ausrichtung: ${type}, Winkel: ${angle}°`);

Ausrichtung: landscape-primary, Winkel: 0°

Auf Änderungen der Ausrichtung reagieren

const updateLayout = () => {
  const type = screen.orientation.type;
  document.body.dataset.orientation = type.startsWith('portrait') ? 'hoch' : 'quer';
  console.log('Neue Ausrichtung:', type);
};

screen.orientation.addEventListener('change', updateLayout);
updateLayout();

// Später wieder abmelden:
// screen.orientation.removeEventListener('change', updateLayout);

Neue Ausrichtung: portrait-primary

Mit Fallback für ältere Browser

const getOrientationType = () => {
  if (screen.orientation?.type) return screen.orientation.type;
  // Fallback über Media Query (ohne primary/secondary-Unterscheidung)
  return matchMedia('(orientation: portrait)').matches
    ? 'portrait-primary'
    : 'landscape-primary';
};

console.log(getOrientationType());

portrait-primary

Spielsteuerung bei gedrehtem Gerät umkehren

const getTiltFactor = () =>
  screen.orientation.type.endsWith('secondary') ? -1 : 1;

window.addEventListener('deviceorientation', (e) => {
  const tilt = (e.gamma ?? 0) * getTiltFactor();
  console.log('Korrigierte Neigung:', tilt.toFixed(1));
});

Korrigierte Neigung: 12.4

// Wichtig · Fallstricke

Kompatibilität: Chrome, Edge und Firefox unterstützen screen.orientation seit Langem. Safari (iOS/macOS) unterstützt es erst ab Version 16.4. In älteren Safari-Versionen gibt es nur das veraltete window.orientation mit Werten in Grad. Prüfen Sie deshalb mit screen.orientation?.type, ob die Eigenschaft vorhanden ist.
„primary“ hängt vom Gerät ab: Welche Ausrichtung als primary gilt, legt das Gerät fest. Auf Tablets und Desktop-Monitoren ist die natürliche Ausrichtung oft landscape-primary mit angle 0. Auf Smartphones ist es portrait-primary. Setzen Sie angle deshalb nicht fest mit einem bestimmten type gleich.
Schreibgeschützt: Eine Zuweisung an type hat keine Wirkung. Um die Ausrichtung festzulegen, gibt es screen.orientation.lock(). Diese Methode funktioniert meist nur im Vollbildmodus und auf Mobilgeräten.
Desktop: Auf Desktop-Rechnern liefert type fast immer landscape-primary. Nur ein hochkant gedrehter Monitor ergibt einen anderen Wert.
In iframes und Web-Workern kann screen.orientation fehlen oder eingeschränkt sein.

Siehe auch

DeviceOrientationEvent.beta ScreenOrientation.angle Screen.orientation Credential.type ScreenDetailed.top