How to Get Browser Window Size and Screen Dimensions with JavaScript

javascript window sizebrowser window dimensionsscreen resolution javascriptdocument body dimensionscross-browser window detection

Published·Jun 17, 2016Modified·Updating soon

Key JavaScript Properties for Window and Screen Dimensions

Visible Area Width: document.body.clientWidth
Visible Area Height: document.body.clientHeight
Visible Area Width (including borders): document.body.offsetWidth
Visible Area Height (including borders): document.body.offsetHeight
Full Document Width: document.body.scrollWidth
Full Document Height: document.body.scrollHeight
Vertical Scroll Position: document.body.scrollTop
Horizontal Scroll Position: document.body.scrollLeft
Vertical Position of Document: window.screenTop
Horizontal Position of Document: window.screenLeft
Screen Resolution Height: window.screen.height
Screen Resolution Width: window.screen.width
Available Work Area Height: window.screen.availHeight
Available Work Area Width: window.screen.availWidth

Precision Positioning Properties

scrollHeight: Gets the scroll height of the element.
scrollLeft: Gets or sets the distance between the left edge of the object and the left edge of the visible content in the window.
scrollTop: Gets or sets the distance between the top edge of the object and the top edge of the visible content in the window.
scrollWidth: Gets the scroll width of the element.
offsetHeight: Gets the height of the element relative to the layout or its parent coordinate specified by the offsetParent property.
offsetLeft: Gets the left position of the element relative to the layout or its parent coordinate.
offsetTop: Gets the top position of the element relative to the layout or its parent coordinate.
event.clientX: Horizontal coordinate relative to the document.
event.clientY: Vertical coordinate relative to the document.
event.offsetX: Horizontal coordinate relative to the container.
event.offsetY: Vertical coordinate relative to the container.
document.documentElement.scrollTop: Vertical scroll value.
event.clientX + document.documentElement.scrollTop: Horizontal coordinate relative to the document plus vertical scroll amount.

Cross-Browser Differences (IE vs. Firefox)

IE 6.0 and Firefox 1.06+

clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

IE 5.0 / 5.5

clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height

Note: The CSS margin property is unrelated to clientWidth, offsetWidth, clientHeight, or offsetHeight.

Technical Notes

This article primarily uses properties of the Document object related to window dimensions. Different browsers require different properties and methods to detect window size:

In Netscape, use Window properties.
In Internet Explorer, inspect the Document's body element.
In DOM environments, focus on the root element's dimensions rather than individual elements.
window.innerWidth: Internal width of the current window.
window.innerHeight: Internal height of the current window.
document.body: Corresponds to the <body> tag of the HTML document.
document.documentElement: Represents the root node of the HTML document.
document.body.clientHeight: Current height of the window containing the HTML document.
document.body.clientWidth: Current width of the window containing the HTML document.

Implementation Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Adjust Browser Window Size</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">Please Adjust Browser Window Size</h2>
<hr>
<form action="#" method="get" name="form1" id="form1">
<!-- Display actual browser window dimensions -->
Actual Height of Browser Window: <input type="text" name="availHeight" size="4"><br>
Actual Width of Browser Window: <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
var winWidth = 0;
var winHeight = 0;
function findDimensions() {
  // Get window width
  if (window.innerWidth)
    winWidth = window.innerWidth;
  else if ((document.body) && (document.body.clientWidth))
    winWidth = document.body.clientWidth;

  // Get window height
  if (window.innerHeight)
    winHeight = window.innerHeight;
  else if ((document.body) && (document.body.clientHeight))
    winHeight = document.body.clientHeight;

  // Detect window size by inspecting Document's body
  if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
  {
    winHeight = document.documentElement.clientHeight;
    winWidth = document.documentElement.clientWidth;
  }

  // Output results to text boxes
  document.form1.availHeight.value = winHeight;
  document.form1.availWidth.value = winWidth;
}
findDimensions();
window.onresize = findDimensions;
</script>
</body>
</html>