在 chrome 中获取错误的窗口高度

Question

我正在尝试在 Chrome 中获取浏览器窗口的正确宽度和高度。火狐浏览器大小正确，其他浏览器没试过。

我已将文档类型设置为!DOCTYPE html，并尝试了$( window ).height()、$( window ).width()、window.innerHeight 和window.innerWidth，但它们都给出了错误的值。

我正在运行 openSuse tumbleweed，chrome 的版本是“Version 86.0.4240.75 (Official Build) (64-bit)”

将 chrome 更新为“版本 87.0.4280.88（官方构建）（64 位）”这也没有帮助，仍然是错误的大小。

我在图像中包含了一些显示这一点的图像，注意：DOMRect 值在 chrome 中不正确，但在 Firefox 中是正确的。抱歉，您可能需要放大才能查看这些值。下面是我在两张图片中记录的内容。

console.log(
    $('#primary')[0].getBoundingClientRect(),
    $( window ).width(),
    window.innerWidth,
    $( window ).height(),
    window.innerHeight
)

我需要精确的尺寸才能正确排列。您可以在水平滚动条上方的背景颜色“红色”下方的 Firefox 图像中看到。我需要知道窗户的正确尺寸 这样我就可以进行数学计算并把事情排好。

还有其他更准确的方法吗？

下面的图片是我从“FSDford”下面的评论中建议的 JSFiddle 得到的。您可以在控制台中看到红色的 877 尺寸“需要放大才能看到”。尺子说它的宽度是856！ Firefox 再次具有正确的宽度。

Answer 1

我维护了一个名为 iframe-resizer 的库，它可以调整 iframe 的大小以匹配其内容，因此我花了数年时间寻找解决此问题的最佳方法。

简单的答案是，如果您的 CSS 导致内容溢出 body 元素，它就会变得复杂且不可靠。

我的库提供了许多不同的方法来解决这个问题，它们提出了不同的权衡。

首先浏览器提供了四种不同的高度和宽度值，这些值通常给出不同的答案

document.body.offsetHeight
document.body.scrollHeight
document.documentElement.offsetHeight
document.documentElement.scrollHeight

您可能会找到适合您的其中一部作品，或者您可能会阅读所有四部作品并使用最大值。

如果这不起作用，我们可以通过获取页​​面上每个元素的底部位置并计算出最低值来强制获得更好的值。

 function getAbsoluteHeight() {
   var allElements = document.querySelectorAll('body *')
   var maxBottomVal = 0

   Array.prototype.forEach.call(allElements, function(el) {
     var styles = window.getComputedStyle(el)
     var marginBottom = 0

     if (styles.marginBottom && !isNaN(parseInt(styles.marginBottom), 10)) {
        marginBottom = parseInt(styles.marginBottom, 10)
     }

     var posBottom = el.getBoundingClientRect().bottom
     var elBottom = marginBottom + posBottom

     if (elBottom > maxBottomVal) {
        maxBottomVal = elBottom
     }
   })

   return Math.ceil(maxBottomVal)
}

如果您必须在每次页面内容更改或调整窗口大小时重新检查它，这显然会产生一些开销。如果您知道哪些元素可能位于页面底部，您可以使用 data-height 属性标记它们，然后检查这些元素的位置以及添加的元素。

虽然我在这里只谈到了高度，但一切都适用于宽度。

Answer 2

我认为您不需要 JQuery 来获取浏览器窗口的宽度，只需尝试使用原生 javascript 使用 window.innerWidth。

Answer 3

这应该适用于 Firefox 和 Chrome 以及任何其他浏览器。

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;