JavaScript Screen lockOrientation() Method

What You’ll Learn

Screen.lockOrientation() is a deprecated, non-standard instance method that locked the screen into one or more orientations. Learn the string and array argument forms, the old vendor prefixes, when it could run (installed apps / fullscreen), and how to migrate to screen.orientation.lock()—with five examples and try-it labs.

Introduction

Games and video players sometimes want the device to stay in landscape. Older APIs tried to do that with screen.lockOrientation("landscape-primary") (or an array of allowed orientations).

That approach is obsolete. Modern browsers expose locking on the ScreenOrientation object from screen.orientation. This tutorial covers the legacy method so you can read old code and migrate it safely.

// Legacy only — do not use in new apps
// screen.lockOrientation("landscape-primary");

Understanding the Method

MDN: the lockOrientation() method of the Screen interface locks the screen into a specified orientation.

• Instance method — historically on window.screen.
• Deprecated & Non-standard — not in any specification.
• Argument — one orientation string, or an array of strings.
• Return — true authorized / false denied (not instant lock proof).

📝 Syntax

lockOrientation(orientation)

Parameters

orientation — a string or an array of strings. Passing several strings lets the screen rotate only among those orientations.

Return value

A boolean: true if locking was authorized, false if denied. MDN: the return does not prove the screen is already locked—there may be a delay.

🎯 Prefer ScreenOrientation.lock()

// Modern idea (still needs fullscreen / policy in many browsers)
if (screen.orientation && screen.orientation.lock) {
  screen.orientation.lock("landscape").then(() => {
    console.log("locked (modern API)");
  }).catch((err) => {
    console.log("lock failed:", err.name);
  });
}

🛡️ Legacy Feature-Detection Pattern

MDN’s examples normalize prefixed names. Use this only when reading old code—not for new apps.

const lockOrientationUniversal =
  screen.lockOrientation ||
  screen.mozLockOrientation ||
  screen.msLockOrientation;

console.log(typeof lockOrientationUniversal);

Examples Gallery

Examples follow MDN Screen.lockOrientation(). Labs feature-detect and usually do not lock your display—they report API availability.

const lockOrientationUniversal =
  screen.lockOrientation ||
  screen.mozLockOrientation ||
  screen.msLockOrientation;

if (typeof lockOrientationUniversal === "function") {
  console.log("legacy lockOrientation API present");
} else {
  console.log("lockOrientation not supported (expected on modern browsers)");
}

lockOrientation not supported (expected on modern browsers)

const lockOrientationUniversal =
  screen.lockOrientation ||
  screen.mozLockOrientation ||
  screen.msLockOrientation;

if (typeof lockOrientationUniversal !== "function") {
  console.log("API missing; would have called lockOrientation(\"landscape-primary\")");
} else {
  const ok = lockOrientationUniversal("landscape-primary");
  console.log(ok ? "Orientation was locked (authorized)" : "Orientation lock failed");
}

API missing; would have called lockOrientation("landscape-primary")

const lockOrientationUniversal =
  screen.lockOrientation ||
  screen.mozLockOrientation ||
  screen.msLockOrientation;

const orientations = ["landscape-primary", "landscape-secondary"];

if (typeof lockOrientationUniversal !== "function") {
  console.log("API missing; would lock to:", orientations.join(", "));
} else {
  const ok = lockOrientationUniversal(orientations);
  console.log(ok ? "Orientation was locked" : "Orientation lock failed");
}

API missing; would lock to: landscape-primary, landscape-secondary

const hasModern =
  !!(screen.orientation && typeof screen.orientation.lock === "function");

console.log({
  hasModernLock: hasModern,
  currentType: screen.orientation ? screen.orientation.type : "(none)",
  tip: "Prefer screen.orientation.lock() in new apps (fullscreen/policy may apply)."
});

{
  "hasModernLock": true,
  "currentType": "landscape-primary",
  "tip": "Prefer screen.orientation.lock() in new apps (fullscreen/policy may apply)."
}

console.log({
  lockOrientation: typeof screen.lockOrientation,
  mozLockOrientation: typeof screen.mozLockOrientation,
  msLockOrientation: typeof screen.msLockOrientation,
  orientationLock: screen.orientation
    ? typeof screen.orientation.lock
    : "no screen.orientation",
  status: "legacy lockOrientation is deprecated & non-standard"
});

{
  "lockOrientation": "undefined",
  "mozLockOrientation": "undefined",
  "msLockOrientation": "undefined",
  "orientationLock": "function",
  "status": "legacy lockOrientation is deprecated & non-standard"
}

🚀 Common Use Cases

• Reading / migrating old fullscreen games that called lockOrientation.
• Understanding vendor-prefixed orientation lock history.
• Teaching why orientation lock is restricted to apps / fullscreen.
• Auditing projects for deprecated Screen methods to remove.
• Planning a move to screen.orientation.lock() with Promise error handling.

🔧 How It Works

📝 Notes

• Deprecated and Non-standard (MDN)—both banners shown above.
• Not Experimental on MDN.
• Not part of any specification; prefer ScreenOrientation.lock().
• Historically limited to installed Web apps or fullscreen pages.
• Related: unlockOrientation(), orientation, width, Window hub, JavaScript hub.

💡 Best Practices