JavaScript Screen orientation Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ORIENTATION

Definition

Screen.orientation is a read-only property that returns a ScreenOrientation object for the current screen orientation (MDN). Access it as window.screen.orientation, then read .type and .angle.

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use screen.orientation. Start with this line.

JavaScript
window.screen.orientation
CallWhat it does
window.screen.orientationPrimary signature.

Built into the browser. Read screen.orientation on window.screen — no import required.

Library declarations
JavaScript
window.screen.orientation

Parameters

ParameterDescription
orientationRequired. Read-only ScreenOrientation

Return Value

Return ValueDescription
*ScreenOrientation object

JavaScript Examples

Example 1 — Read type and angle

Log the current orientation string and degrees.

JavaScript
if (screen.orientation) {
  console.log(screen.orientation.type);
  console.log(screen.orientation.angle);
} else {
  console.log("screen.orientation not available");
}
Try It Yourself

How It Works

  1. Guard first. Confirm screen.orientation exists before reading fields.
  2. Read type. A string such as "landscape-primary".
  3. Read angle. Degrees for the current orientation.
  4. Your values differ. Desktop monitors are often landscape; phones change as you rotate.

Example 2 — MDN Landscape / Portrait Switch

Branch on type — same idea as MDN’s example.

JavaScript
if (!screen.orientation) {
  console.log("The orientation API isn't supported in this browser :(");
} else {
  switch (screen.orientation.type) {
    case "landscape-primary":
      console.log("That looks good.");
      break;
    case "landscape-secondary":
      console.log("Mmm… the screen is upside down!");
      break;
    case "portrait-secondary":
    case "portrait-primary":
      console.log("Mmm… you should rotate your device to landscape");
      break;
    default:
      console.log("The orientation API isn't supported in this browser :(");
  }
}
Try It Yourself

How It Works

  1. Detect the API. Missing object → friendly unsupported message.
  2. Switch on type. Four known OrientationType strings.
  3. Group portraits. Both portrait cases share one message in MDN’s sample.
  4. Default path. Unexpected or missing type → treat as unsupported.

Example 3 — Listen for change

Update when the user rotates the device.

JavaScript
if (screen.orientation) {
  screen.orientation.addEventListener("change", function (event) {
    console.log(
      "ScreenOrientation change: " +
        event.target.type +
        ", " +
        event.target.angle +
        " degrees."
    );
  });
  console.log("Listening for orientation change…");
} else {
  console.log("screen.orientation not available");
}
Try It Yourself

How It Works

  1. Attach to the object. The event lives on ScreenOrientation, not only on window.
  2. Use event.target. Read the updated type and angle.
  3. Rotate to test. On a phone/emulator, turn the device to fire change.
  4. Desktop note. Many desktops rarely fire rotation events.
Compatibility

Browser Support

Screen.orientation is Baseline Widely available (MDN: since March 2023). Always read .type on the ScreenOrientation object.

✓ Baseline · Widely available

Screen.orientation

Returns a ScreenOrientation with type and angle — supported in modern evergreen browsers.

95% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
orientation Excellent

Bottom line: Safe for modern web apps. Feature-detect screen.orientation for very old browsers, and prefer .type over treating orientation as a string.

Frequently Asked Questions

A read-only ScreenOrientation object for the current screen orientation. Access it as window.screen.orientation. Use orientation.type for strings like landscape-primary.
No. MDN marks Screen.orientation as Baseline Widely available (since March 2023). It is not Deprecated, Experimental, or Non-standard.
portrait-primary, portrait-secondary, landscape-primary, and landscape-secondary.
window.orientation is an older, non-standard number API. Prefer screen.orientation (ScreenOrientation) for modern code.
The Screen.orientation property itself is read-only. Locking uses ScreenOrientation.lock() / unlock() when allowed—not assignment to screen.orientation.
Listen for the change event on screen.orientation, then read type and angle again.

Next: pixelDepth

Learn the Screen property that reports color bit depth.

pixelDepth tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Screen mozEnabled Property JavaScript Screen pixelDepth Property