JavaScript: Get browser window width and height

How to get window width and height using JavaScript#

The dimensions of the browser window can determined using the followng width-height peoperties on the window object.

• window.innerWidth - width of the area within which the webpage is displayed
• window.innerHeight - height of the area within which the webpage is displayed
• window.outerHeight - overall height of the briwser window, inclusive of toolbars etc.
• window.outerWidth - overall width of the browser window

<div id="browser-window">
<div id="window-info">Your browser window's dimensions are as follows</div>

<div>Display area width: <span id="innerWidth"></span></div>
<div>Display area height: <span id="innerHeight"></span></div>
<div>Window width: <span id="outerWidth"></span></div>
<div>Window height: <span id="outerHeight"></span></div>

<div id="instructions">Try resizing the window, opening and in full-screen mode, opening dev tools</div>
</div>

.applet {
  background: #f5f5f5;
}
.applet-body {
  padding: 10px;
}
#browser-window {
  text-align: center;
}
#browser-window span {
  font-style: italic;
}
#window-info {
  font-size: 19px;
  margin-bottom: 15px;
}
#instructions {
  font-size: 13px;
  margin-top: 20px;
}

window.onresize = updateWindowDimension;

function updateWindowDimension() {
  document.querySelector('#innerWidth').innerText = window.innerWidth + 'px';
  document.querySelector('#innerHeight').innerText = window.innerHeight + 'px';
  document.querySelector('#outerWidth').innerText = window.outerWidth + 'px';
  document.querySelector('#outerHeight').innerText = window.outerHeight + 'px';
}

updateWindowDimension();

If you want to find out the width and height of the screen, refer to /webdev/javascript/screen-width-height-resolution.html.

summary#

The dimensions of the browser window can be determined using the followng width-height properties of the window object: window.innerWidth, window.innerHeight, window.outerWidth, and window.outerHeight.