时间戳

首页 > 解决方案 > 在 chrome 中获取错误的窗口高度

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

问题描述

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

我已将 doctype 设置为!DOCTYPE html并尝试过$( window ).height(),和$( window ).width()，但它们都给出了错误的值。window.innerHeightwindow.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 图像中看到。我需要知道窗户的正确尺寸，这样我才能进行数学计算并把东西排成一行。

有没有另一种更准确的方法来做到这一点？

镀铬尺寸错误。

火狐的大小合适

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

JSFiddle 错误大小

JSFiddle 大小合适

标签： javascriptjquery

解决方案

我维护了一个名为 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属性标记它们，然后检查这些元素的位置以及添加的元素。

虽然我在这里只讨论了高度，但一切也适用于宽度。

推荐阅读