为什么 Firefox 返回 0 作为 $(window).height() 的值答案

【问题标题】：Why does Firefox return 0 as the value of $(window).height()为什么 Firefox 返回 0 作为 $(window).height() 的值
【发布时间】：2023-03-09 20:52:01
【问题描述】：

在我看来，Firefox 在使用 $(window).height() 时应该能够更好地返回正确的值。

我正在使用 jQuery 1.8.2。这是该特定版本中的错误吗？在计算视口高度时，我测试过的所有其他浏览器都会返回一个适当的值。

为了解决这个问题，我使用下面的 snip 将像素值应用到 div。

$(window).bind('cwsObjectsShown', function() {
  var height = $(window).height();
  if (height === 0) {
     height = window.innerHeight;
  }
  height = height - '120';
  $('#game_objects').css('height', height + 'px');
});

【问题讨论】：

你是在页面上没有任何内容之前调用这个吗？ $(window).height() 在 Firefox 上运行良好。尝试在控制台中调用它，看看会得到什么结果。
使用 jQuery 1.8.2，即使在文档的 <head> 中，我也可以在加载任何内容之前获取窗口高度：jsfiddle.net/bdukes/HDrnx

标签： jquery firefox jquery-1.8

【解决方案1】：

jQuery 的 $(window).height() 对 doctype 很敏感。试试？

jQuery 1.8.1 发行说明说

不要使用 Quirks 模式！ jQuery 从未支持 Quirks 模式，我们不会在 Quirks 中进行任何测试。这会影响像 $("window").height() 这样的值，并且 jQuery 1.8 Quirks 模式的结果确实发生了变化，以支持一些现代浏览器功能。我们看到的大多数问题案例都来自希望处于标准模式但在其标签之前有无效文档类型或无关标记的开发人员。如有疑问，请使用简单而简短的。

例如，使用 jQuery 1.8.2 和 Firefox 16，我得到一个有效的 $(window).height() 文档类型为 html，但高度为 0，文档类型为 html5。在 Chromium 20 中，两者都有效。（W3C HTML5 规范确实说使用 doctype html，而不是 html5。）

【讨论】：

【解决方案2】：

试试这个功能：

function GetBrowserDim() {
    if (window.innerHeight) {
        return { w: window.innerWidth, h: window.innerHeight};
    } else {
        return { w: document.body.clientWidth, h: document.body.clientHeight };
    }
}

【讨论】：

【解决方案3】：

$(window).height() 和 $(window).width() 在 IE 中返回 0 在兼容模式下。在FireFox中不检查这个，可能是一样的。尝试使用 $(document).height() 或 $(document).width() 代替。

【讨论】：

【解决方案4】：

在我的情况下，我必须删除 html 元素中的属性

<html lang="en-US" prefix="og: http://ogp.me/ns#">

改为刚刚

<html>

现在我得到了正确的文档宽度和高度

【讨论】：

【解决方案5】：

我在 Firefox 中找到了 jquery 这个奇怪的高度渲染的答案......

我在 html 标记中使用 class="no-js" 和 doctype...当我删除它时，FF 计算正确...所以我用 jquery 添加了这个类，就像这样 $('html').addClass( 'no-js');

现在计算在所有浏览器中都是一样的..

【讨论】：

【解决方案6】：

你必须在开头使用<!DOCTYPE html>标签，一切都会好起来的。

【讨论】：

【解决方案7】：

试试下面的代码：

$(function(){
  $(window).on('cwsObjectsShown', function() {
    alert($(this).height());
  });   
});

【讨论】：

我从控制台运行它，使用 $(document).ready(), $(window).load()，每次结果都是 0。我会尝试创建一个在一个 url 上对此进行测试用例，尽管我开始怀疑这个问题对于页面上发生的其他代码非常具体。