JavaScript Screen width Property

What You’ll Learn

Screen.width is a read-only instance property that returns the full width of the screen in CSS pixels. Learn how it differs from availWidth and innerWidth, why OS chrome can shrink available space, and MDN’s classic 1024×768 check—with five examples and try-it labs.

Introduction

The browser’s screen object describes the display behind your window. screen.width answers: “How wide is the whole screen, in CSS pixels?” That is the full horizontal size of the monitor (or the display associated with this window)—not how wide the current tab is.

Operating systems may keep a vertical strip for themselves (taskbars on the side, docks, and similar chrome). That is why availWidth can be smaller than width. MDN also pairs width with height for crude resolution checks such as “at least 1024×768.”

console.log(window.screen.width);

Understanding the Property

MDN: the Screen.width read-only property returns the width of the screen in CSS pixels.

• Instance — on the Screen object from window.screen.
• Read-only — you cannot assign to width.
• CSS pixels — same unit family as layout sizes (not always hardware pixels).
• Full width — may be larger than availWidth when OS chrome is reserved.

📝 Syntax

const w = window.screen.width;
// same as:
const w2 = screen.width;

Value

A number: the full screen width in CSS pixels. Compare it with window.screen.availWidth when you care about space left after OS chrome.

📈 width vs availWidth

🎨 MDN Minimum Resolution Check

MDN’s teaching example: a crude way to check that the screen is at least 1024×768 CSS pixels.

// Crude way to check that the screen is at least 1024x768
if (window.screen.width >= 1024 && window.screen.height >= 768) {
  console.log("Resolution is 1024x768 or above");
} else {
  console.log("Resolution is below 1024x768");
}

Useful for diagnostics and teaching. For responsive UI, prefer CSS @media queries rather than hard-coding JS resolution gates.

Examples Gallery

Examples follow MDN Screen.width. Numbers on your machine will differ by display and OS chrome.

console.log(window.screen.width);
console.log(typeof screen.width);

1920
number

if (window.screen.width >= 1024 && window.screen.height >= 768) {
  console.log("Resolution is 1024x768 or above");
} else {
  console.log("Resolution is below 1024x768");
}

Resolution is 1024x768 or above

const reserved = screen.width - screen.availWidth;

console.log("full:", screen.width);
console.log("avail:", screen.availWidth);
console.log("reserved:", reserved);

full: 1920
avail: 1920
reserved: 0

const box = {
  width: screen.width,
  height: screen.height
};

console.log(box.width + " x " + box.height);
console.log(box.width * box.height);

1920 x 1080
2073600

console.log({
  screenWidth: screen.width,
  availWidth: screen.availWidth,
  innerWidth: window.innerWidth,
  outerWidth: window.outerWidth
});

{
  "screenWidth": 1920,
  "availWidth": 1920,
  "innerWidth": 1200,
  "outerWidth": 1280
}

🚀 Common Use Cases

• Logging full display resolution for diagnostics or QA.
• Teaching crude minimum-resolution checks (MDN 1024×768 pattern).
• Comparing with availWidth to see reserved horizontal chrome.
• Pairing with screen.height for full screen size.
• Contrasting monitor width with window.innerWidth for beginners.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Read-only — do not assign to width.
• Not the same as window.innerWidth (viewport of this window).
• Related: pixelDepth, height, availWidth, Window hub.

💡 Best Practices