25

我正在尝试获取当前浏览器视口高度，使用

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

但我得到的价值太低了。当视口大约 850 像素高时，我从 height() 中得到大约 350 或 400 像素的值。这是怎么回事？

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

4

6 回答 6

56

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

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

于 2014-09-22T17:14:33.537 回答
12

一个可能的原因可能是您正在使用 firebug/ 其他东西检查控制台。这样你就不会因为萤火虫的高度而得到正确的窗口高度。

你可以尝试这样的事情：

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

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

进而

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

或者，如果您想检查 put on firebug 控制台，然后将其与浏览器分离，然后检查结果。

于 2012-05-13T04:32:17.017 回答
5

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

请检查浏览器对您的 project.html 的查看比例。

$(window).height() 的值与调整视图比例时客户区的“真实”像素不同！（以及其他 $(xx).width()...在这种情况下）

（浏览器记得我前几天粗心调整的110%比例……）

于 2015-12-24T07:19:40.287 回答
3

没有复制。请记住，浏览器 chrome 中的项目会降低窗口高度，例如地址栏、开发人员工具、书签工具栏等。以下似乎显示了视口高度的准确表示：

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>
于 2012-05-13T04:38:31.367 回答
3

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

于 2019-06-12T12:07:49.870 回答
2

JSFiddle 通过创建一个<iframe>在渲染代码后动态加载的工作。

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

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

于 2012-05-13T04:38:47.950 回答