获取浏览器视口的宽度和高度，无论内容大小如何且不调整为 100%？

Posted 2023-03-05

【中文标题】获取浏览器视口的宽度和高度，无论内容大小如何且不调整为 100%？

【英文标题】：Get the browser viewport width and height no matter the size of the contents and without sizing to 100%?

【发布时间】：2020-03-31 17:52:57

【问题描述】：

有没有办法在不将正文宽度和高度设置为 100% 的情况下获取页面视口的宽度和高度而不是页面的内容？

我找到的答案要求将 html 和 body 元素设置为 100% 宽度和 100% 高度。

页面上的内容有时会超出视口大小。我无法将身体切换到 100%，然后检查值然后恢复。

在我看来应该有一个简单的属性：

document.body.viewportWidth;
document.body.viewportHeight;

关于窗口调整大小并排除 chrome 的更新。

这里有相关问题：

HTML5 Canvas 100% Width Height of Viewport?

更新： 我一直在用这个：

var availableWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var availableHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

可能是视口值正确，但元素本身正在增长或缩小。

我在documentElement docs 中找不到 document.documentElement.clientWidth 或 document.documentElement.clientHeight。

更新 2： 看起来这可能是我的错误。我在日志中注意到，有时该元素没有计算出宽度或高度，可能是因为它尚未添加到页面中。

var elementWidth = parseFloat(getComputedStyle(element, "style").width);
var elementHeight = parseFloat(getComputedStyle(element, "style").height);

我认为我上面已经使用的代码是正确的。

更新 3： 我在获取视口大小时发现了这个page。

【问题讨论】：

clientWidth 和 clientHeight 在CSSOM View spec 中定义，documentElement 给出了视口尺寸减去任何滚动条。

window.innerWidth 和 innerHeight 也在那里定义。它们提供视口尺寸，包括任何滚动条。

【参考方案1】：

这有帮助吗？

document.documentElement.clientWidth
document.documentElement.clientHeight

【参考方案2】：

window.innerWidth 和 window.innerHeight 是否适合您？

【参考方案3】：

我可能无法正确理解您的问题，但如果您正在寻找浏览器窗口的高度和宽度，您可以使用window.innerHeight 和window.innerWidth。

这里有更多关于窗口height 和width 的信息，可能会有用。

【讨论】：

是的，我一直在使用类似的东西。我已经更新了帖子。我认为我的问题可能无关紧要。