Window innerWidth and innerHeight Properties
Example
Get the window's height and width: (NOT including toolbars/scrollbars):
var w = window.innerWidth;
var h = window.innerHeight;
Try it yourself »
More "Try it Yourself" examples below.
Definition and Usage
The innerWidth property returns the inner width of a window's content area.
The innerHeight property returns the inner height of a window's content area.
These properties are read-only.
Tip: Use the outerWidth and outerHeight properties to get the width/height with toolbars/scrollbars.
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| innerWidth | 1.0 | 9.0 | 1.0 | 3.0 | 9.0 |
| innerHeight | 1.0 | 9.0 | 1.0 | 3.0 | 9.0 |
Note: For IE8 and earlier, you can use the clientWidth and clientHeight properties (See "More Examples" below).
Syntax
window.innerWidth
window.innerHeight
Technical Details
| Return Value: | A Number, representing the inner width and/or the inner height of the browser window's content area, in pixels |
|---|
More Examples
Example
A cross-browser solution (using clientWidth and clientHeight for IE8 and earlier):
var w = window.innerWidth
|| document.documentElement.clientWidth
||
document.body.clientWidth;
var h = window.innerHeight
||
document.documentElement.clientHeight
|| document.body.clientHeight;
Try it yourself »
Example
A demonstration of innerWidth, innerHeight, outerWidth and outerHeight in one example:
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>";
Try it yourself »
Window Object
