在 chrome 中获取错误的窗口高度 [英] Getting wrong window height in chrome

问题描述

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

I'm trying to get the correct width and height of the browser window in Chrome. The size is correct in Firefox, I have not tried any other browsers.

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

I have set the doctype to !DOCTYPE html and have tried $( window ).height(), $( window ).width(), window.innerHeight and window.innerWidth, but all of them give the wrong values.

我正在运行 openSuse tumbleweed 并且 chrome 的版本是版本 86.0.4240.75(官方版本)(64 位)"

I'm running openSuse tumbleweed and the version of chrome is "Version 86.0.4240.75 (Official Build) (64-bit)"

将 chrome 更新为版本 87.0.4280.88(官方版本)(64 位)"；这也没有帮助，仍然是错误的尺寸.

Updated chrome to "Version 87.0.4280.88 (Official Build) (64-bit)" this did not help either, still the wrong size.

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

I have included a couple in images that show this, NOTICE: the DOMRect values are not correct in chrome but are correct in firefox. Sorry, you may need to zoom in to see the values. Below is what I'm logging in the two images.

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

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

I need precise sizes as to have things line up correctly. You can see in the firefox image below the background colour "red" just above the horizontal scrollbar. I need to know the correct dimensions of the window so I can do the math and make things line up.

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

Is there another way more accurate to do this?

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

The image below is what I got from the JSFiddle suggested in the comment below form "FSDford". You can see in the console the size 877 in red "need to zoom in to see it". The ruler says its width is 856 though! Once again Firefox has the correct width.

推荐答案

我维护了一个名为 iframe-resizer 的库，它可以调整 iframe 的大小以匹配它们的内容，所以我花了很多年时间寻找这个问题的最佳解决方案.

I maintain a library called iframe-resizer, which sizes iframes to match their content, so I have spent a number of years looking for the best solution to this problem.

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

The simple answer is that if your CSS causes content to overflow the body element, it gets complicated and unreliable.

我的图书馆提供了许多不同的方法来解决这个问题，它们呈现出不同的权衡.

My library offer a number of different methods for working this out and they present different trade offs.

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

To start with the browser offers four different values for height and width and these often give differing answers

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

您可能会为自己找到其中一部作品，或者您可以阅读所有四部作品并使用最大值.

You may find one of these works for you, or you might read all four and use the largest value.

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

If that doesn’t work we can brute force a better value by getting the bottom position of every element on the page and working out the lowest value.

 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 属性标记它们，然后检查添加到其中的元素的位置.

This obviously has somewhat of an overhead if you have to recheck it every time the content on the page changes, or the window is resized. If you know which elements are likely at the bottom of the page you could tag them with a data-height attribute and then on check the position of those element with that added to it.

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

Although I’ve only talked about height here, everything will also work with width.

这篇关于在 chrome 中获取错误的窗口高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！