Window innerWidth 和 innerHeight 屬性

Window 對象

innerHeight 傳回視窗的文檔顯示區的高度，如果有垂直滾動條，也包括滾動條高度。

innerWidth 傳回視窗的文檔顯示區的寬度，如果有水準滾動條，也包括滾動條高度。

innerWidth 和 innerHeight 是隻讀屬性。

注意：使用

outerWidth 和 outerHeight 屬性擷取浏覽器視窗的寬度與高度。

擷取文檔顯示區的寬度與高度：

設定文檔顯示區的寬度與高度：

表格中的數字表示支援該屬性的第一個浏覽器版本号。

屬性

innerWidth

1.0

9.0

3.0

innerHeight

注意：IE 8 及更早 IE 版本不支援這兩個屬性，可以使用 clientWidth 和 clientHeight 屬性。

擷取視窗的高度與寬度:

var w=window.innerWidth;

var h=window.innerHeight;

以下示範了 innerWidth, innerHeight, outerWidth 和 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>";

實用的 JavaScript 方案（涵蓋所有浏覽器，包含 IE8 及以下版本的浏覽器）：

var w=window.innerWidth

|| document.documentElement.clientWidth

|| document.body.clientWidth;

var h=window.innerHeight

|| document.documentElement.clientHeight

|| document.body.clientHeight;