以跨浏览器的方式查找视口的确切高度和宽度（无 Prototype/jQuery）
Posted
技术标签:
【中文标题】以跨浏览器的方式查找视口的确切高度和宽度（无 Prototype/jQuery）【英文标题】：Find the exact height and width of the viewport in a cross-browser way (no Prototype/jQuery) 【发布时间】：2010-12-18 12:29:59 【问题描述】：我正在尝试查找浏览器视口的确切高度和宽度，但我怀疑 Mozilla 或 IE 给了我错误的数字。这是我的身高方法：
var viewportHeight = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
我还没有开始研究宽度，但我猜它会是类似的东西。
有没有更正确的方法来获取这些信息？理想情况下，我希望该解决方案也适用于 Safari/Chrome/其他浏览器。
【问题讨论】：
Get the browser viewport dimensions with javascript的可能重复 另外，您可以使用W 库，它处理跨浏览器视口检测;) 【参考方案1】：你可以试试这个：
function getViewport()
var viewPortWidth;
var viewPortHeight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined')
viewPortWidth = window.innerWidth,
viewPortHeight = window.innerHeight
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
viewPortWidth = document.documentElement.clientWidth,
viewPortHeight = document.documentElement.clientHeight
// older versions of IE
else
viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
return [viewPortWidth, viewPortHeight];
(http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/)
但是，甚至不可能在所有浏览器中获取视口信息（例如 IE6 的 quirks 模式）。但是上面的脚本应该做得很好:-)
【讨论】：
被一个 bug 卡住了 5 个小时，结果发现 jquery 在执行$(document).width() 或 $(window).width() 时不会在 FF/Chrome 中返回相同的值。 window.innerWidth 效果很好。
这似乎在 iframe 内部不起作用，而是返回 iframe 大小。有什么线索吗？
@GarciaWebDev 所以你说的是它工作正常;-)
@Dee2000 我在说什么，或者更确切地说，我想说的是，当你在常规页面上测量时，你会得到浏览器视口大小，但是当你从 iframe 内部测量时，你获取该 iframe 的文档大小，而不是浏览器视口。不确定我是否解释得很好，让我知道我是否应该重新制定。
@GarciaWebDev 在一个简单的页面上，您“认为”您正在获得“浏览器”视口大小，但事实并非如此。您将获得您所在/所在的 html 页面的视口大小。无论该页面是“顶部”还是在 iframe 或嵌套嵌套嵌套 iframe 中，它始终是您所在的 HTML 页面的视口大小。如果您想知道顶部（或父）页面的视口大小，只要您的 iframe 是“友好的”（不是跨域的），那么您可以简单地替换“窗口”。与“父母”。或“顶部”。到您测试的每个值（例如 parent.innerWidth）。【参考方案2】：
您可以使用较短的版本：
<script type="text/javascript">
<!--
function getViewportSize()
var e = window;
var a = 'inner';
if (!('innerWidth' in window))
a = 'client';
e = document.documentElement || document.body;
return width : e[ a+'Width' ] , height : e[ a+'Height' ]
//-->
</script>
【讨论】：
【参考方案3】：我一直只使用document.documentElement.clientHeight/clientWidth。在这种情况下，我认为您不需要 OR 条件。
【讨论】：
它不会受伤。一旦找到有效值，将不会评估它们的剩余部分 你有一个错字，应该是：'document.documentElement'。这在 quirksmode 下不起作用......在 FF 上它给出了整个文档的高度，而不仅仅是“clientHeight”，而在 IE 上它给出了“0”。 同意document.documentElement.clientWidth 是纯 JS 的方式。 responsejs.com/labs/dimensions
同意。来自：quirksmode.org/mobile/viewports.html - “document.documentElement 实际上是 <html> 元素”。 "document.documentElement.clientWidth 和 clientHeight 仍然给出视口的尺寸，而不是 <html> 元素的尺寸。（这是一个特殊的规则，它只适用于这个元素，只适用于这个属性对。在所有其他情况下，使用元素的实际宽度。）”因此它应该在 IE6 标准模式及更高版本中“在所有情况下”工作。这些值不包括滚动条（与window.innerWidth 和innerHeight 不同）。【参考方案4】：
试试这个..
<script type="text/javascript">
function ViewPort()
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
var viewsize = w + "," + h;
alert("Your View Port Size is:" + viewsize);
</script>
【讨论】：
谢谢！你刚刚救了我的命！ :)【参考方案5】：使用此提示：http://www.appelsiini.net/projects/viewport 或该代码：http://updatepanel.wordpress.com/2009/02/20/getting-the-page-and-viewport-dimensions-using-jquery/
【讨论】：
我正在尝试在不使用 jQuery 的情况下执行此操作。我想我应该更清楚一点。以上是关于以跨浏览器的方式查找视口的确切高度和宽度（无 Prototype/jQuery）的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 vanilla JavaScript 查找 div 的宽度？
JavaScript 查找视口高度/宽度，crossbrowser：