Get the Size of the Screen, Browser Window and Web Page with JavaScript

10/06/2021

Contents

In this article, you will learn how to get the size of the screen, browser window and web page with JavaScript.

The Screen Size

To get the monitor (or mobile) screen size, you can use the Screen.width and Screen.height properties.

// The screen size
const screenWidth  = window.screen.width;
const screenHeight = window.screen.height;

To get the available screen size, you can use the Screen.availWidth and Screen.availHeight properties.

// The available screen size
const availScreenWidth  = window.screen.availWidth;
const availScreenHeight = window.screen.availHeight;

The Browser Window Size

To get the window outer size, you can use the window.outerWidth and window.outerHeight properties.

// The window outer size
const windowOuterWidth  = window.outerWidth;
const windowOuterHeight = window.outerHeight;

To get the window inner size, you can use the window.innerWidth and window.innerHeight properties.

// The window inner size
const windowInnerWidth  = window.innerWidth;
const windowInnerHeight = window.innerHeight;

To get the window inner size without the scrollbars, you can use the Element.clientWidth and Element.clientHeigh properties.

// The window inner size without the scrollbars
const clientWidth  = document.documentElement.clientWidth;
const clientHeigh = document.documentElement.clientHeigh;

The Web Page Size

To get the web page size, you can use the Element.scrollWidth and Element.scrollHeight properties.

The returned values include the web page’s padding, but not border, scrollbars (if rendered) and margin.

// The web page size
const pageWidth  = document.documentElement.scrollWidth;
const pageHeight = document.documentElement.scrollHeight;

Demo

Code

HTML

<p class="size">
  screenWidth = <span id="sW"></span><br>
  screenHeight = <span id="sH"></span><br>
  availScreenWidth = <span id="aW"></span><br>
  availScreenHeight = <span id="aH"></span><br>
  windowOuterWidth = <span id="oW"></span><br>
  windowOuterHeight = <span id="oH"></span><br>
  windowInnerWidth = <span id="iW"></span><br>
  windowInnerHeight = <span id="iH"></span><br>
  clientWidth = <span id="cW"></span><br>
  clientHeigh = <span id="cH"></span><br>
  pageWidth = <span id="pW"></span><br>
  pageHeight = <span id="pH"></span><br>
</p>

JavaScript

function getSize() {
  // The screen size
  const sW = document.getElementById('sW');
  const sH = document.getElementById('sH');

  const screenWidth  = window.screen.width;
  const screenHeight = window.screen.height;

  sW.innerHTML = screenWidth;
  sH.innerHTML = screenHeight;

  // The available screen size
  const aW = document.getElementById('aW');
  const aH = document.getElementById('aH');

  const availScreenWidth  = window.screen.availWidth;
  const availScreenHeight = window.screen.availHeight;

  aW.innerHTML = availScreenWidth;
  aH.innerHTML = availScreenHeight;

  // The window outer size
  const oW = document.getElementById('oW');
  const oH = document.getElementById('oH');

  const windowOuterWidth  = window.outerWidth;
  const windowOuterHeight = window.outerHeight;

  oW.innerHTML = windowOuterWidth;
  oH.innerHTML = windowOuterHeight;

  // The window inner size
  const iW = document.getElementById('iW');
  const iH = document.getElementById('iH');

  const windowInnerWidth  = window.innerWidth;
  const windowInnerHeight = window.innerHeight;

  iW.innerHTML = windowInnerWidth;
  iH.innerHTML = windowInnerHeight;

  // The window inner size without the scrollbars
  const cW = document.getElementById('cW');
  const cH = document.getElementById('cH');

  const clientWidth  = document.documentElement.clientWidth;
  const clientHeigh = document.documentElement.clientHeight;

  cW.innerHTML = clientWidth;
  cH.innerHTML = clientHeigh;

  // The web page size
  const pW = document.getElementById('pW');
  const pH = document.getElementById('pH');

  const pageWidth  = document.documentElement.scrollWidth;
  const pageHeight = document.documentElement.scrollHeight;

  pW.innerHTML = pageWidth;
  pH.innerHTML = pageHeight;
}

function updateSize() {
  getSize();
}

window.addEventListener('load', updateSize, false);
window.addEventListener('resize', updateSize, false);