wordpress 上的 $(window).height() 数量太大答案

【问题标题】：Too big number of $(window).height() on wordpresswordpress 上的 $(window).height() 数量太大
【发布时间】：2014-09-12 12:18:06
【问题描述】：

我正在创建工具提示的动态位置，我首先在 jsfiddle 上测试了代码，然后将我的代码放到我的网站上（在 localhost 上使用 wordpress 构建），在 jsfiddle 上我的脚本是有效的，但是当我把代码放到我的网站上时，它是因为$(window).height() 的结果不同，所以不起作用（在 chrome 上不是动态的）。您可以检查this fiddle 并尝试鼠标输入链接（第一个链接）然后在控制台查看日志，窗口高度的结果是wh :667 但在我的站点上窗口高度是wh :12024 和wh : 11970（可更改)

jQuery(document).ready(function ($) {    
    $('a[rel="bookmark"]').mouseenter(function () {
        console.log($(window).height());
    })
});

也用这个

jQuery(function($){
  $(window).ready(function(){
    console.log($(window).height());
  });
  $(window).on('resize', function(){
    console.log($(window).height());
  });
});

谷歌浏览器

jsfiddle：667

我的网站（wordpress）：12024 - 可更改

Mozilla

jsfiddle：602

我的网站：585

我确定，我添加了strict doctype。

我找到this explanation

$(window).height() 是显示网站。（不包括你的工具栏和状态栏之类的东西）

$(document).height() 是文档中显示的高度视口。如果它高于$(window).height()，你会得到滚动条来滚动文档

我认为在我的网站结果$(window).height() 是滚动条来滚动 chrome 上的文档（仅供参考我的网站有一个长页面）。如果是这样，我怎样才能在我的网站上获得视口的高度，是否有另一种方法可以获得每个浏览器（chrome、mozilla、opera 等）的视口的相同结果（实际）高度？

注意：我不认为使用screen.height，因为它会导致屏幕显示（包括浏览器工具栏）

【问题讨论】：

不使用 jQuery(document).ready，你可能想试试 $(window).load(function(){...});
@rontornambe ：我用过，没有变化。在 wordpress 上使用 jQuery 而不是 $ 仅供参考，jQuery 的典型 $ 快捷方式不起作用。
感谢 WP 提示。

标签： jquery wordpress google-chrome

【解决方案1】：

我花了几个小时/几天的时间来调试这个婴儿，但我终于得到了它。信不信由你，但我已经好几年没有这样的错误了！！多么讨厌的错误。

我并不是说您遇到了确切的问题，但是，这个线程正是我所面临的。我 100% 确定我的 html 设置为严格。

然而，当我在 Chrome 中执行“检查元素”时，严格 DOCTYPE 的实际定义就消失了。所以我检查了其他网站，我立即意识到发生了一些非常可疑的事情，这不应该发生。 谁吃了我严格的文档类型？

不仅如此，我还注意到 HEAD 的内容移动到了<body> 并且发生了其他奇怪的事情。

我做了任何合理的人都会做的事，我推测我所有的时间都浪费在了这个愚蠢的 UTF-8 BOM 上，因为我过去遇到过很多问题。哦，男孩，我是对的。

在我切换到没有 bom 的 UTF-8 之后，一切都开始完美无缺。请注意，有趣的是：我的网站似乎 100% 运行，即使 HTML 混乱（我从未注意到浏览器的解释方式不正确）。

为什么我的文件首先被编码为带有 bom 的 UTF-8 以及为什么它甚至会影响浏览器？我不知道。

【讨论】：

HTML 格式不正确对我来说也是个问题。当 Chrome 获得不好看的 html 文件时，它会做一些奇怪的事情。
所以我没有遇到 BOM 问题，但我没有使用严格的 DOCTYPE 并且没有注意到。我当然不会将这种行为与文档类型联系起来，所以感谢一百万！

【解决方案2】：

好的，我明白了。我使用的是纯 javascript

将`$(window).height()` 替换为`window.innerHeight`

$(window).load(function(){
    var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
    console.log(y);
});

铬：

jsfiddle：667

我的网站：667

Mozilla

jsfiddle：602

我的网站：602

https://stackoverflow.com/a/11744120/1297435

【讨论】：

将$(window).height() 替换为window.innerHeight

将`$(window).height()` 替换为`window.innerHeight`