完整网页的高度和宽度

Question

我正在尝试获取整个网页的高度和宽度，而不考虑视口。

也就是说，即使浏览器没有最大化，我也需要知道网页的完整大小是多少。

我看过的方法有document.body.clientWidth/clientHeight, innerHeight/Width等，但是随着浏览器变小，它们都变了。

请帮忙！谢谢！

Answer 1

您正在寻找 getComputedStyle()。它 returns 一个可以查询 width 和 height 属性的对象。

getComputedStyle(document.body).width;

请注意，如果页面的布局随视口大小而变化，则此调用的结果将发生变化。但是，如果客户端变小到需要滚动，返回的结果仍然是 <body> 的实际宽度。

Methods I have looked at include document.body.clientWidth/clientHeight, innerHeight/Width etc. But they all change when the browser is made smaller.

之所以如此，是因为 window 尺寸是可变的，布局会根据 window 尺寸发生变化。

Answer 2

--编辑-- 我想我对你想要什么有了更好的了解。查看 scrollHeight and scrollWidth 属性。

document.getElementById('width').innerHTML = document.body.scrollWidth;
document.getElementById('height').innerHTML = document.body.scrollHeight;

scroll width is: <div id="width"></div>
scroll height is: <div id="height"></div>

检查 screen 对象的属性。

availHeight 和 availWidth return window 可用的屏幕高度和宽度（以像素为单位）（不包括诸如任务栏).

即使您调整浏览器 window 的大小，这些值也不会改变。试试下面的代码片段：

document.getElementById('width').innerHTML = screen.availWidth;
document.getElementById('height').innerHTML = screen.availHeight;

width is: <div id="width"></div>
height is: <div id="height"></div>

Height and width of complete webpage