JavaScript Screen availWidth Property

What You’ll Learn

Screen.availWidth is a read-only instance property that returns how much horizontal space (in CSS pixels) is available to the window. Learn how it differs from screen.width, how it pairs with availHeight, and how it compares to innerWidth—with five examples and try-it labs.

Introduction

window.screen describes the display. Full horizontal size is screen.width. availWidth is the horizontal space available to the window—often equal to width, but sometimes smaller when the OS keeps a vertical strip (for example a taskbar docked on the left or right).

const screenAvailWidth = window.screen.availWidth;
console.log(screenAvailWidth);

Understanding the Property

MDN: the Screen.availWidth property returns the amount of horizontal space (in CSS pixels) available to the window.

• Instance — on the Screen object from window.screen.
• Read-only — you cannot assign to availWidth.
• CSS pixels — layout-oriented units, not always raw hardware pixels.
• Horizontal twin — pairs with availHeight for the usable box.

📝 Syntax

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

Value

A number: CSS pixels of horizontal space available to the window.

📈 width vs availWidth

Examples Gallery

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

const screenAvailWidth = window.screen.availWidth;
console.log(screenAvailWidth);
console.log(typeof screen.availWidth);

1920
number

const { width, availWidth } = window.screen;

console.log(width);
console.log(availWidth);
console.log(availWidth <= width);

1920
1920
true

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.availWidth,
  height: screen.availHeight
};

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

1920 x 1040
1996800

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

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

🚀 Common Use Cases

• Planning max width for secondary windows or tool palettes.
• Logging display metrics in diagnostics or QA tools.
• Estimating horizontal OS chrome with width - availWidth.
• Building an available screen box with availHeight.
• Teaching screen metrics vs viewport metrics.

🔧 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 availWidth.
• Not the same as window.innerWidth (viewport of this window).
• Related: availHeight, Window hub, window.open(), JavaScript hub.

💡 Best Practices