ScreenOrientation.angle — Eigenschaft · JavaScript-Referenz

Signatur

ScreenOrientation.angle

Beschreibung

Die schreibgeschützte Eigenschaft angle des ScreenOrientation-Interfaces liefert den aktuellen Drehwinkel des Bildschirms in Grad, gemessen relativ zur natürlichen Ausrichtung des Geräts. Man erreicht sie über screen.orientation.angle. Typische Werte sind 0, 90, 180 und 270.

Welche Lage die natürliche Ausrichtung ist, hängt vom Gerät ab: Bei den meisten Smartphones ist es das Hochformat, bei vielen Tablets und Desktop-Monitoren das Querformat. Deshalb bedeutet angle === 0 nicht automatisch Hochformat. Wer wissen will, ob gerade Hoch- oder Querformat angezeigt wird, prüft besser screen.orientation.type (z. B. "portrait-primary").

Gebraucht wird angle vor allem dann, wenn Inhalte oder Sensordaten passend zur Drehung umgerechnet werden müssen. Das betrifft etwa Kamera-Vorschauen, Canvas-Spiele, AR-Anwendungen oder die Werte aus DeviceOrientationEvent. Auf Änderungen reagiert man mit dem Ereignis change auf screen.orientation.

Rückgabewert

Typ

number

Beschreibung

Eine vorzeichenlose Ganzzahl (unsigned short): der Drehwinkel in Grad gegen den Uhrzeigersinn, bezogen auf die natürliche Ausrichtung des Geräts. Typisch sind 0, 90, 180 oder 270.

Beispiele

Aktuellen Winkel auslesen

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

Winkel: 0°, Typ: portrait-primary

Auf Drehungen reagieren (addEventListener und onchange)

const zeigeWinkel = () => {
  const { angle } = screen.orientation;
  document.body.dataset.angle = String(angle);
  console.log(`Neuer Winkel: ${angle}°`);
};

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

// Alternative über die on-Eigenschaft:
// screen.orientation.onchange = zeigeWinkel;

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

Neuer Winkel: 90°

Canvas-Inhalt passend zur Drehung gegensteuern

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const zeichne = () => {
  const rad = (screen.orientation.angle * Math.PI) / 180;
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate(rad); // Gegendrehung, damit der Pfeil nach "oben" im Gerät zeigt
  ctx.fillText('↑', 0, 0);
};

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

Mit Fallback für alte Browser

const getAngle = () => {
  if (screen.orientation && typeof screen.orientation.angle === 'number') {
    return screen.orientation.angle;
  }
  // Veraltetes window.orientation (iOS Safari < 16.4), kann -90 liefern
  const legacy = typeof window.orientation === 'number' ? window.orientation : 0;
  return (legacy + 360) % 360;
};

console.log(getAngle());

// Wichtig · Fallstricke

Winkel ist nicht gleich Lage: 0 steht für die natürliche Ausrichtung des Geräts. Das ist nicht zwingend das Hochformat. Für die Frage „Hoch- oder Querformat?“ nimmt man screen.orientation.type oder die CSS-Media-Query (orientation: portrait).
Schreibgeschützt: Eine Zuweisung an angle bleibt wirkungslos. Die Ausrichtung sperrt man mit screen.orientation.lock(). Das klappt meist nur im Vollbildmodus und auf Mobilgeräten.
Kompatibilität: Chrome, Edge und Firefox unterstützen die Eigenschaft seit Langem, Safari erst ab 16.4. In älteren iOS-Versionen gibt es nur das veraltete window.orientation, das auch -90 liefern kann.
Auf Desktop-Rechnern ohne Drehsensor ist der Wert in der Regel dauerhaft 0.
Die Richtung der Drehung (im oder gegen den Uhrzeigersinn) haben Browser früher unterschiedlich ausgelegt. Deshalb sollte man die Werte bei 90/270 auf echten Geräten testen.

Siehe auch

DeviceOrientationEvent.alpha ScreenOrientation.type Screen.orientation Touch.rotationAngle CSSRotate.angle