jQuery 为什么 $(window).height() 如此错误？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10569301/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
why is $(window).height() so wrong?
提问by mix
I'm trying to get the current browser viewport height, using
我正在尝试获取当前浏览器视口高度，使用
$(window).on('resize',function() {
console.log("new height is: "+$(window).height());
});
But I'm getting values that are way too low. When the viewport is around 850px tall, I'm getting values around 350 or 400px from height(). What's up?
但是我得到的值太低了。当视口大约 850 像素高时，我从 height() 获得大约 350 或 400 像素的值。这是怎么回事？
采纳答案by The System Restart
One possible reason may be that you are checking the console with firebug/ something else. So that you don't get window height correct due to firebug height.
一个可能的原因可能是您正在使用萤火虫/其他东西检查控制台。这样你就不会因为萤火虫的高度而得到正确的窗口高度。
You can try something like this:
你可以尝试这样的事情：
take a span/div in you document:
在您的文档中使用 span/div：
<span id="res"></span>
and then
进而
$(window).on('resize',function() {
$('#res').html("new height is: "+$(window).height());
});
Or if you want to check out put on firebug console then detach it from browser and then check the result.
或者，如果您想在 firebug 控制台上查看放置，则将其从浏览器中分离，然后检查结果。
回答by Nilson Morais
I was having the same problem in Firefox then I added <!DOCTYPE HTML>on my index and it worked.
我在 Firefox 中遇到了同样的问题，然后我添加<!DOCTYPE HTML>了我的索引并且它起作用了。
Source: http://viralpatel.net/blogs/jquery-window-height-incorrect/
来源：http: //viralpatel.net/blogs/jquery-window-height-incorrect/
回答by ob.yann
For those who still has problem after above solutions...
对于那些在上述解决方案后仍然有问题的人......
Please check the view ratio of browser onto your project.html..
请检查浏览器在您的 project.html 上的查看比例..
The value of $(window).height() is not as same as 'real' pixels of client area when the view ratio adjusted! (and so others $(xx).width()...in this situation)
调整视图比例时，$(window).height() 的值与客户区的“真实”像素不同！（以及其他 $(xx).width()...在这种情况下）
(The browser remembered my careless 110% ratio adjusted days ago...)
（浏览器记得我前几天粗心调整的110%比例……）
回答by Sampson
No repro. Keep in mind that the window height is diminished by items in the browser's chrome, such as the address bar, developer tools, bookmarks toolbars and more. The following appears to show an accurate representation of the viewport height:
没有重现。请记住，浏览器镶边中的项目会降低窗口高度，例如地址栏、开发人员工具、书签工具栏等。以下似乎显示了视口高度的准确表示：
jsbin will give you a pretty good estimation of the window height, as it doesn't limit your code output to a small iframe like other js-testing sites such as jsfiddle.
jsbin 将为您提供一个非常好的窗口高度估计，因为它不会像其他 js 测试站点（如 jsfiddle）那样将您的代码输出限制为一个小的 iframe。
http://jsbin.com/otaqej/edit#javascript,html
http://jsbin.com/otaqej/edit#javascript,html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js"></script>
</head>
<body>
<div id="message">Height: 0</div>
<script>
$(window).on("resize", function(){
$("#message").html( "Height: " + $(window).height() );
});
</script>
</body>
</html>
回答by Blender
JSFiddle works by creating an <iframe>that gets loaded dynamically after you render the code.
JSFiddle 通过创建一个<iframe>在您呈现代码后动态加载的对象来工作。
Your JavaScript is calculating the height of the window, which happens to be the <iframe>'s height, which is around 400px tall for me.
你的 JavaScript 正在计算窗口的高度，它恰好是<iframe>的高度，对我来说大约是 400px 高。
Your code is doing what it should be.
您的代码正在做它应该做的事情。
回答by jim_kastrin
I have seen jQuery's $(window).height()returning a wrong value on Chrome mobile, even though my viewportand DOCTYPEdeclarations were in place. Eventually I used window.innerHeight.
我已经看到 jQuery$(window).height()在 Chrome 移动设备上返回错误的值，即使我的viewport和DOCTYPE声明已经到位。最终我使用了window.innerHeight.
