English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript Object

JavaScript Reference Manual

JS DOM Reference Manual

Window innerWidth Property

JavaScript Window Object

innerWidthA read-only property that returns the width of the window content area (viewport) including the scroll bar.

usedouterWidthProperty to get the width of the entire browser window.

Syntax:

window.innerWidth
var h = window.innerHeight;
var w = window.innerWidth;
Test and See‹/›

Browser compatibility

The numbers in the table specify the first browser version that fully supports the innerWidth property:

property
innerWidth11939

Technical details

Return value:A number representing the internal width of the browser window content area in pixels

More examples

Display height and width using the onresize event:

<body onresize="myFunc()">
<script>
function myFunc() {
　　　var w = window.innerWidth;
　　　var h = window.innerHeight;
　　　document.getElementById("para").innerHTML = "Width: "　+　w　+　"<br>Height: "　+　h;
}
</script>
Test and See‹/›

Cross-browser solution (for IE8and earlier versions used clientWidth and clientHeight):

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
Test and See‹/›

This example shows 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>";
document.write(txt);
Test and See‹/›

Related References

Reference: Window (Window)window.innerHeight property

Reference: Window (Window)window.outerHeight property

Reference: Window (Window)window.outerWidth property

JavaScript Window Object

JS Storage ObjectJavaScript Window Object