JavaScript Screen isExtended Property

What You’ll Learn

Screen.isExtended is a read-only instance property that returns true when the device has multiple screens and false otherwise. Learn when to use it before multi-window layouts, how Permissions-Policy can force false, and how to feature-detect safely—with five examples and try-it labs.

Introduction

Many people use two (or more) monitors. The Window Management API helps web apps place windows across those displays. Before you try a fancy multi-screen layout, you can ask: “Does this device even have more than one screen?”

That question is exactly what window.screen.isExtended answers: true for multiple screens, false for a single screen (or when the API is blocked / missing).

console.log(window.screen.isExtended);

Understanding the Property

MDN: the isExtended read-only property of the Screen interface returns true if the user’s device has multiple screens, and false if not. It is typically accessed via window.screen.isExtended.

• Instance — on window.screen.
• Read-only — you cannot assign to isExtended.
• Boolean — multi-screen (true) vs not (false).
• Experimental — limited browser support; not Baseline.
• Secure context — HTTPS / localhost where supported.

📝 Syntax

const multi = window.screen.isExtended;
// same as (when supported):
const multi2 = screen.isExtended;

Value

A boolean: true if the device has multiple screens, false otherwise. If a window-management Permissions-Policy blocks the Window Management API, MDN says isExtended always returns false.

🖥️ Window Management & Multi-Screen Layouts

MDN recommends testing isExtended before attempting a multi-window, multi-screen layout with the Window Management API. Think of it as a cheap gate:

if (window.screen.isExtended) {
  // Create multi-screen window layout
} else {
  // Create single-screen window layout
}

🛡️ Feature Detection Pattern

Because support is limited, wrap reads in a small helper. Unsupported browsers should fall back to a single-screen path.

function getIsExtended() {
  if (!("isExtended" in window.screen)) {
    return { supported: false, value: false };
  }
  return { supported: true, value: Boolean(window.screen.isExtended) };
}

const info = getIsExtended();
console.log(info.supported, info.value);

Examples Gallery

Examples follow MDN Screen.isExtended. On unsupported browsers, feature-detect demos still print a clear message.

if ("isExtended" in window.screen) {
  console.log(window.screen.isExtended);
  console.log(typeof screen.isExtended);
} else {
  console.log("isExtended not supported");
}

false
boolean

if (!("isExtended" in window.screen)) {
  console.log("Create single-screen window layout (API missing)");
} else if (window.screen.isExtended) {
  console.log("Create multi-screen window layout");
} else {
  console.log("Create single-screen window layout");
}

Create single-screen window layout

function labelIsExtended() {
  if (!("isExtended" in screen)) {
    return "unsupported (treat as single-screen)";
  }
  return screen.isExtended
    ? "multiple screens detected"
    : "single screen (or multi-screen blocked)";
}

console.log(labelIsExtended());

single screen (or multi-screen blocked)

const supported = "isExtended" in screen;
const value = supported ? screen.isExtended : null;

console.log({
  supported,
  isExtended: value,
  note: "If window-management policy blocks the API, isExtended is always false (MDN)."
});

{
  "supported": true,
  "isExtended": false,
  "note": "If window-management policy blocks the API, isExtended is always false (MDN)."
}

console.log({
  isExtended: "isExtended" in screen ? screen.isExtended : "(unsupported)",
  width: screen.width,
  height: screen.height,
  availWidth: screen.availWidth,
  availHeight: screen.availHeight,
  colorDepth: screen.colorDepth
});

{
  "isExtended": false,
  "width": 1920,
  "height": 1080,
  "availWidth": 1920,
  "availHeight": 1040,
  "colorDepth": 24
}

🚀 Common Use Cases

• Gate multi-window / multi-screen layouts (Window Management API).
• Show a “dual monitor recommended” tip in creative tools.
• Diagnostics panels that dump Screen capabilities.
• Teaching experimental Screen APIs vs baseline size properties.
• Failing open to a single-screen UI when support or policy is missing.

🔧 How It Works

📝 Notes

• Experimental and Limited availability (MDN)—not Baseline.
• Not Deprecated or Non-standard—Experimental banner only.
• Secure context required where the property is available.
• Permissions-Policy window-management can force false.
• Related: height, availHeight, Window hub, JavaScript hub.

💡 Best Practices