screen.availWidth is a read-only number: the amount of horizontal space, in CSS pixels, available to the window (MDN). Read it as window.screen.availWidth.
Read the notes below before you rely on this property. Prefer feature detection when support is limited.
Use screen.availWidth. Start with this line.
window.screen.availWidth| Call | What it does |
|---|---|
window.screen.availWidth | Primary signature. |
Built into the browser. Read screen.availWidth on window.screen — no import required.
window.screen.availWidthThis member has no parameters beyond those shown in the signature.
| Return Value | Description |
|---|---|
| * | Number (CSS pixels) |
availWidthLog the available screen width in CSS pixels.
console.log(window.screen.availWidth);
console.log(typeof screen.availWidth);window.screen. Every window exposes a Screen object.availWidth. MDN: horizontal space available to the window (CSS px).typeof. It is always a number in browsers that support Screen.widthCompare available width with full screen width and estimate reserved space.
const width = screen.width;
const avail = screen.availWidth;
const reserved = width - avail;
console.log(width);
console.log(avail);
console.log(avail <= width);
console.log(reserved);avail <= width. Available space cannot exceed the full screen.availHeightReport the available screen box MDN pairs with availWidth.
const box = {
width: screen.availWidth,
height: screen.availHeight
};
console.log(box.width + " x " + box.height);
console.log(box.width * box.height);availWidth. Horizontal available space (MDN).availHeight. Vertical twin.Screen.availWidth is Baseline Widely available across modern browsers (MDN: since July 2015).
Supported in Chrome, Firefox, Safari, Edge, and Opera. Read-only CSS-pixel available width via window.screen.
Bottom line: Safe to read in modern browsers. See the MDN Screen.availWidth reference.
Learn how many bits the screen uses for color.
14 people found this page helpful