window.innerWidth vs window.outerWidth Explained

Inner vs Outer Window Dimensions

The window object exposes two pairs of dimension properties that measure different parts of the browser window.

innerWidth / innerHeight

These measure the content area of the browser window, which is the area where web pages render. This includes the scrollbar if one is visible.

console.log(window.innerWidth);  // e.g., 1440
console.log(window.innerHeight); // e.g., 820

outerWidth / outerHeight

These measure the entire browser window including its frame, toolbars, address bar, tab bar, and window borders.

console.log(window.outerWidth);  // e.g., 1440
console.log(window.outerHeight); // e.g., 900

The Difference

The gap between outer and inner dimensions tells you how much space the browser's own UI occupies:

const chromeHeight = window.outerHeight - window.innerHeight;
const chromeWidth = window.outerWidth - window.innerWidth;
console.log('Browser chrome takes', chromeHeight, 'px vertically');

Typical Values

Browser	Vertical Chrome (approx)
Chrome (macOS)	75–90px
Firefox (macOS)	70–85px
Safari (macOS)	55–70px
Chrome (Windows)	80–95px

When to Use Each

• innerWidth/Height: Use for calculating available content space, positioning popups, or determining scroll behavior
• outerWidth/Height: Use for checking total window footprint, detecting developer tools panels, or calculating browser chrome size
• clientWidth: Use for CSS-equivalent viewport width (excludes scrollbar)

Edge Cases

• In fullscreen mode (F11), outer and inner dimensions may be nearly identical
• DevTools panels reduce innerWidth/Height but not outerWidth/Height
• On mobile browsers, the address bar can auto-hide, changing innerHeight dynamically