Question

我正在尝试使用

获取当前浏览器视口高度

$(window).on('resize',function() { 
  console.log("new height is: "+$(window).height()); 
});

但我得到的价值太低了。当视口大约850px高时，我从高度（）获得大约350或400px的值。怎么了？

示例：http://jsfiddle.net/forgetcolor/SVqx9/

Answer 1

我在Firefox中遇到了同样的问题然后我在我的索引上添加了<!DOCTYPE HTML>并且它有效。

来源：http://viralpatel.net/blogs/jquery-window-height-incorrect/

Answer 2

一个可能的原因可能是你正在用firebug /其他东西检查控制台。因此，由于萤火虫的高度，你的窗户高度不正确。

您可以尝试这样的事情：

在你的文件中取一个span / div：

<span id="res"></span>

然后

$(window).on('resize',function() { 
  $('#res').html("new height is: "+$(window).height()); 
});

或者，如果您想检查放入firebug控制台，然后将其从浏览器中分离，然后检查结果。

Answer 3

对于那些在上述解决方案后仍有问题的人......

请检查浏览器与project.html之间的浏览率。

$（window）.height（）的值与＆＃39; real＆＃39;不同。调整视图比率时客户区的像素！（以及其他人$（xx）.width（）......在这种情况下）

（浏览器记得我在几天前调整了110％的粗心比率......）

Answer 4

没有重复。请记住，浏览器的镶边中的项目会缩小窗口高度，例如地址栏，开发人员工具，书签工具栏等。以下内容似乎显示了视口高度的准确表示：

jsbin会给你一个很好的窗口高度估计，因为它不会像其他js测试网站（如jsfiddle）那样将你的代码输出限制为小iframe。

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>

Answer 5

JSFiddle通过创建在呈现代码后动态加载的<iframe>来工作。

你的JavaScript正在计算窗口的高度，恰好是<iframe>的高度，对我来说大约是400px。

你的代码正在做它应该做的事情。

Answer 6

我已经看到jQuery的$(window).height()在Chrome移动版上返回了错误的值，即使我的viewport和DOCTYPE声明已经到位。最终，我使用了window.innerHeight。

为什么$（window）.height（）这么错？

6 个答案: