确定浏览器中的实际查看大小答案

【问题标题】：Determine actual viewing size in browser确定浏览器中的实际查看大小
【发布时间】：2010-06-24 15:14:51
【问题描述】：

我正在尝试确定当前浏览器窗口的实际 viewPORT 大小。我试过了：

全部返回整个页面大小，而不是查看区域。

我最终要实现的是强制弹出菜单出现在屏幕上（在视口中）。现在，当它显示时，它可能会显示在滚动下方，用户对此并不满意。我知道他们点击的位置的 x,y。我只需要将它与查看区域的大小（与弹出窗口的大小）进行比较，看看它是否会离开屏幕。

需要注意的是页面显示在 IFRAME 中，所以如果我需要上一层才能得到正确的值，我可以这样做。

【问题讨论】：

【解决方案1】：

window.innerHeight/innerWidth

这确实确实为您提供了视口大小（在本例中为 iframe 内的大小），但它在 IE 上不可用。

document.documentElement.clientHeight/clientWidth

当浏览器处于标准模式时，它会为您提供视口大小。通常用作 IE 的后备。

document.body.clientHeight/clientWidth

这为您提供Quirks mode 中的视口高度。您不想处于 Quirks 模式。检查您文档的<!DOCTYPE。

我只需要将它与查看区域的大小进行比较

那你还得看看document.documentElement.scrollTop/scrollLeft。

【讨论】：

window.innerHeight 给出了 IFRAME 大小...它没有给出视口大小 :( 这是在 Firefox 中。
如果您在 iframe 中，则 iframe 是您的视口。您不可能在 iframe 范围之外显示任何内容。如果父文档是您网站的一部分（同源策略），您可以使用 window.parent 调用它并让它读取它自己的视口并在 iframe 周围/顶部添加元素。
也许我们没有在术语上正确沟通。对我（以及我研究过这个问题的其他网站）来说，视口是浏览器从顶部菜单到底部状态栏的区域。当前处于 VIEW 中的页面的实际区域。因此，如果浏览器以 1900x1200 全屏显示，顶部的 IE/FF/Chrome 菜单占用 200 像素，而状态栏和 Windows 任务栏又占用 100 像素，则视口高度将为 900 像素（1200-200-100）。页面的高度可以从 0 像素到无穷大像素。如果它大于可用的 900，您会看到一个滚动条。

【解决方案2】：

试试

document.getElementById("").offsetWidth

用不同的元素ID填充上面的代码，尝试使用body标签，或者包装div。

【讨论】：

Grrr... 不。希望就是这样。我的显示器是 1900x1200，带有 Body 标签的 offsetWidth 报告：1903x1308。 1903 是正确的，但是 1308 是页面的大小。

【解决方案3】：

显然，通过转到父文档，我能够得到正确的值。

谢谢！

【讨论】：