Widely available Supported across all major browsers. Safe to use in production.

Screen orientation

The ScreenOrientation interface of the Screen Orientation API provides information about the current orientation of the document.

A ScreenOrientation instance object can be retrieved using the screen.orientation property.

EventTarget ScreenOrientation

Devices and Sensors

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
ScreenOrientation
38
79
43
16.4
38
16.4
orientation

The orientation read-only property of the Screen interface returns the current orientation of the screen.
38
79
43
16.4
39
16.4
angle

The angle read-only property of the ScreenOrientation interface returns the document's current orientation angle.
38
79
43
16.4
38
16.4
change_event

The change event of the ScreenOrientation interface fires when the orientation of the screen has changed, for example when a user rotates their mobile phone.
38
79
43
16.4
38
16.4
type

The type read-only property of the ScreenOrientation interface returns the document's current orientation type, one of portrait-primary, portrait-secondary, landscape-primary, or landscape-secondary.
38
79
43
16.4
38
16.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: ms (12)
Implementation note
  • Edge does not return an `Orientation` object; instead, it returns the orientation type as a string.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: moz (14)

Syntax

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

Use cases

  • Using Screen orientation

    The ScreenOrientation interface of the Screen Orientation API provides information about the current orientation of the document.

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links