Window innerWidth
and innerHeight
Properties
Definition and Usage
innerHeight
returns the height of the window's document display area, including the height of the vertical scrollbar if present.
innerWidth
returns the width of the window's document display area, including the height of the horizontal scrollbar if present.
innerWidth
and innerHeight
are read-only properties.
Note: Use the outerWidth and outerHeight properties to get the width and height of the browser window.
Syntax
To get the width and height of the document display area:
window.innerWidth
window.innerHeight
To set the width and height of the document display area:
window.innerWidth = pixels
window.innerHeight = pixels
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Property | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
innerWidth | 1.0 | 9.0 | 1.0 | 3.0 | 9.0 |
innerHeight | 1.0 | 9.0 | 1.0 | 3.0 | 9.0 |
Note: These properties are not supported in IE 8 and earlier. Use the clientWidth and clientHeight properties instead.
Examples
Get the width and height of the window:
var w = window.innerWidth;
var h = window.innerHeight;
The following demonstrates the use of innerWidth
, innerHeight
, outerWidth
, and outerHeight
:
var txt = "";
txt += "<p>innerWidth: " + window.innerWidth + "</p>";
txt += "<p>innerHeight: " + window.innerHeight + "</p>";
txt += "<p>outerWidth: " + window.outerWidth + "</p>";
txt += "<p>outerHeight: " + window.outerHeight + "</p>";
A practical JavaScript solution that covers all browsers, including IE8 and below:
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;