JavaScript Screen orientationchange Event

What You’ll Learn

Screen orientationchange is a deprecated, non-standard instance event that fired when the device orientation changed. Learn the old addEventListener / onorientationchange shapes, how it differs from Window orientationchange and from Screen change, and how to migrate to screen.orientation change—with five examples and try-it labs.

Introduction

When a phone rotates from portrait to landscape, layouts often need a refresh. Older code sometimes listened for orientationchange on screen (or on window).

That Screen event is obsolete. Modern browsers expose orientation updates on screen.orientation via the Screen Orientation API. This tutorial covers the legacy Screen event so you can read old snippets and migrate them safely.

// Legacy only — do not use in new apps
// screen.addEventListener("orientationchange", () => { /* … */ });

Understanding the Event

MDN: the orientationchange event fires when the device’s orientation has changed.

• Instance event — historically associated with Screen.
• Deprecated & Non-standard — not in any specification.
• Generic Event — no special orientation payload fields.
• Replacement — ScreenOrientation change.

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("orientationchange", (event) => { });

onorientationchange = (event) => { };

Event type

A generic Event.

🎯 Prefer ScreenOrientation change

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

⚖️ Related Events (Do Not Mix Them Up)

Examples Gallery

Examples follow MDN Screen: orientationchange event. Labs mostly feature-detect and show the modern replacement—legacy listeners often never fire on today’s browsers.

console.log({
  hasOnorientationchange: "onorientationchange" in screen,
  typeofHandler: typeof screen.onorientationchange,
  tip: "Screen orientationchange is deprecated & non-standard — prefer orientation.change"
});

{
  "hasOnorientationchange": false,
  "typeofHandler": "undefined",
  "tip": "Screen orientationchange is deprecated & non-standard — prefer orientation.change"
}

try {
  screen.addEventListener("orientationchange", () => {
    console.log("legacy Screen orientationchange fired");
  });
  console.log("Attached orientationchange on screen (may never fire)");
} catch (err) {
  console.log("Could not attach:", err.name);
}

Attached orientationchange on screen (may never fire)

if ("onorientationchange" in screen) {
  screen.onorientationchange = () => {
    console.log("legacy onorientationchange fired");
  };
  console.log("Assigned screen.onorientationchange");
} else {
  console.log("onorientationchange not available on screen (expected)");
}

onorientationchange not available on screen (expected)

if (screen.orientation && typeof screen.orientation.addEventListener === "function") {
  screen.orientation.addEventListener("change", (event) => {
    const type = event.target.type;
    const angle = event.target.angle;
    console.log(`ScreenOrientation change: ${type}, ${angle} degrees.`);
  });
  console.log("Listening on screen.orientation (preferred)");
} else {
  console.log("ScreenOrientation change not available");
}

Listening on screen.orientation (preferred)
// After rotate (mobile): ScreenOrientation change: landscape-primary, 90 degrees.

console.log({
  screenOnorientationchange: "onorientationchange" in screen,
  windowOnorientationchange: "onorientationchange" in window,
  hasOrientation: !!screen.orientation,
  orientationChange: screen.orientation
    ? typeof screen.orientation.onchange
    : "no screen.orientation",
  currentType: screen.orientation ? screen.orientation.type : "(none)",
  status: "legacy Screen orientationchange is deprecated & non-standard"
});

{
  "screenOnorientationchange": false,
  "windowOnorientationchange": true,
  "hasOrientation": true,
  "orientationChange": "object",
  "currentType": "landscape-primary",
  "status": "legacy Screen orientationchange is deprecated & non-standard"
}

🚀 Common Use Cases

• Reading / migrating old mobile pages that listened on screen.
• Understanding why rotate handlers stopped firing after browser updates.
• Teaching the move to screen.orientation change.
• Auditing projects for deprecated Screen events to remove.
• Contrasting with experimental Screen change (Window Management).

🔧 How It Works

📝 Notes

• Deprecated and Non-standard (MDN)—both banners shown above.
• Not Experimental on MDN.
• Not part of any specification; prefer ScreenOrientation.change.
• Different from experimental Screen change.
• Related: orientation, change, lockOrientation(), Window hub.

💡 Best Practices