Widths and heights

JavaScript has many width (and height) values, many of which are listed below.

The grid above is fixed to the left of the viewport and won’t resize with different browser window widths so you can see the window.innerWidth value (or document.documentElement.clientWidth if there’s a scrollbar).

window.innerWidth is highlighted as it’s the value used by CSS media queries (“@media”) for the current device screen or browser window. (Some smartphones have suprising values!)

window.screen.width	:	?	px
window.screen.availWidth	:	?	px
window.outerWidth	:	?	px
document.documentElement.scrollWidth	:	?	px
document.documentElement.offsetWidth	:	?	px
window.innerWidth	:	?	px
document.documentElement.clientWidth	:	?	px
document.body.offsetWidth	:	?	px
document.body.scrollWidth	:	?	px

window.screen.height	:	?	px
window.screen.availHeight	:	?	px
window.outerHeight	:	?	px
document.documentElement.scrollHeight	:	?	px
document.documentElement.offsetHeight	:	?	px
window.innerHeight	:	?	px
document.documentElement.clientHeight	:	?	px
document.body.offsetHeight	:	?	px
document.body.scrollHeight	:	?	px

Values update as you resize the browser (or flip between portrait and landscape) - all except document.documentElement.scrollWidth when window width decreases - click update to refresh the page for the new values.

Width of scrollbar = ?px = window.innerWidth - document.documentElement.clientWidth

See demo page above.

window.screen.width : width of the screen (monitor / smartphone / etc)

window.screen.availWidth : width of the active screen without the OS toolbars e.g. Windows taskbar

window.outerWidth : width of the entire browser window, including the address bar, tabs bar and other browser panels

document.documentElement.scrollWidth : html width + margin + border (not scrollbar)

document.documentElement.offsetWidth : html width + border (not margin or scrollbar)

window.innerWidth : width of the “viewport” window that displays the web page + scrollbar width

document.documentElement.clientWidth : the viewport window (html width); measured inside the scrollbar if there is one (not margin, border or scrollbar)

document.body.offsetWidth : body width + border (not margin or scrollbar)

document.body.scrollWidth : body width (not margin, border or scrollbar)

document.documentElement : property gives you the <html> element

document.body : property gives you the <body> element

Note: padding is included in the width