ScreenOrientation

Baseline 2023 *
Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

Das ScreenOrientation-Interface der Screen Orientation API bietet Informationen über die aktuelle Ausrichtung des Dokuments.

Ein ScreenOrientation-Instanzobjekt kann über die screen.orientation-Eigenschaft abgerufen werden.

EventTarget ScreenOrientation

Instanzeigenschaften

ScreenOrientation.type Schreibgeschützt

Gibt den aktuellen Ausrichtungstyp des Dokuments zurück, einer von portrait-primary, portrait-secondary, landscape-primary oder landscape-secondary.

ScreenOrientation.angle Schreibgeschützt

Gibt den aktuellen Ausrichtungswinkel des Dokuments zurück.

Instanzmethoden

ScreenOrientation.lock()

Sperrt die Ausrichtung des beinhaltenden Dokuments auf seine Standardausrichtung und gibt ein Promise zurück.

ScreenOrientation.unlock()

Entsperrt die Ausrichtung des beinhaltenden Dokuments aus seiner Standardausrichtung.

Ereignisse

Diese Ereignisse können mit addEventListener() gehört oder einem Event-Listener zur Eigenschaft oneventname dieses Interfaces zugewiesen werden.

change

Wird ausgelöst, wenn sich die Ausrichtung des Bildschirms ändert.

Beispiel

Im folgenden Beispiel hören wir auf ein Ausrichtungs-change-Ereignis und loggen den neuen Bildschirm-Ausrichtungstyp und Winkel.

js
screen.orientation.addEventListener("change", (event) => {
  const type = event.target.type;
  const angle = event.target.angle;
  console.log(`ScreenOrientation change: ${type}, ${angle} degrees.`);
});

Spezifikationen

Specification
Screen Orientation
# screenorientation-interface

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
ScreenOrientation
angle
change event
lock
type
unlock

Legend

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

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
User must explicitly enable this feature.
Has more compatibility info.