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

Question

我正在尝试在 Chrome 中获取浏览器窗口的正确宽度和高度。 Firefox 中的大小是正确的，我没有尝试过任何其他浏览器。
我已将文档类型设置为 !DOCTYPE html并尝试过$( window ).height() , $( window ).width() , window.innerHeight和 window.innerWidth ，但它们都给出了错误的值。
我正在运行 openSuse tumbleweed，chrome 的版本是“版本 86.0.4240.75(官方构建)(64 位)”
将 chrome 更新为“版本 87.0.4280.88(官方版本)(64 位)”，这也没有帮助，仍然是错误的大小。
我在图像中包含了一些显示这一点的图像，注意:DOMRect 值在 chrome 中不正确，但在 Firefox 中是正确的。抱歉，您可能需要放大才能查看这些值。下面是我在两张图片中记录的内容。

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

我需要精确的尺寸才能正确排列。您可以在水平滚动条上方的背景颜色“红色”下方的 Firefox 图像中看到。我需要知道 window 的正确尺寸
所以我可以做数学并把事情排好。
有没有另一种更准确的方法来做到这一点？


下图是我从“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 标记它们。属性，然后检查那些添加到它的元素的位置。
虽然我在这里只讨论了高度，但一切也适用于宽度。