Window: innerWidth property
Baseline Widely 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.
Value
An integer value indicating the width of the window's layout viewport in pixels. Thisproperty is read-only, and has no default value.
To change the window's width, use one of theWindow methods for resizingwindows, such asresizeBy() orresizeTo().
Usage notes
If you need to obtain the width of the window minus the scrollbar and borders, use theroot<html> element'sclientWidthproperty instead.
TheinnerWidth property is available on any window or object that behaveslike a window, such as a frame or tab.
Examples
// 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
<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);Result
You can alsoview the results of the demo code in a separate page.
Specifications
| Specification |
|---|
| CSSOM View Module # dom-window-innerwidth |