Window: innerWidth property

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The read-onlyWindow propertyinnerWidth returns the interior width of the window in pixels (that is, the width of the window'slayout viewport). That includes the width of the vertical scroll bar, if one is present.

Similarly, the interior height of the window (that is, the height of the layout viewport) can be obtained using theinnerHeight property. That measurement also accounts for the height of the horizontal scroll bar, if it is visible.

// This will log the width of the viewportconsole.log(window.innerWidth);// This will log the width of the frame viewport within a framesetconsole.log(self.innerWidth);// This will log the width of the viewport of the closest framesetconsole.log(parent.innerWidth);// This will log the width of the viewport of the outermost framesetconsole.log(top.innerWidth);

Demo

HTML

html

<p>Resize the browser window to fire the <code>resize</code> event.</p><p>Window height: <span></span></p><p>Window width: <span></span></p>

JavaScript

const heightOutput = document.querySelector("#height");const widthOutput = document.querySelector("#width");function updateSize() {  heightOutput.textContent = window.innerHeight;  widthOutput.textContent = window.innerWidth;}updateSize();window.addEventListener("resize", updateSize);