jquery - Mobile Safari $(window).height() URL 栏差异

Question

我正在尝试设置一个 100% 窗口高度的固定 div。但 mobile safari 无法检测到正确的窗口高度。它始终认为 URL 栏是等式的一部分。

这是我当前正在使用的，但它不考虑地址栏。

$(function(){
    $(document).ready(function(){ // On load
        alert($.browser);   
        $('#right-sidebar').css({'height':(($(window).height()))+'px'});
    });
    $(window).resize(function(){ // On resize
        $('#right-sidebar').css({'height':(($(window).height()))+'px'});
    });
});

Answer 1

Tldr

如果你只是想查询窗口高度，跨浏览器，就完事了，使用jQuery.documentSize并调用$.windowHeight() 。要实现您自己的解决方案，请继续阅读。

何时使用 jQuery 或文档的 clientHeight

jQuery 的 $(window).height() 是 document.documentElement.clientHeight 的包装器。它为您提供视口(viewport)的高度，不包括浏览器滚动条覆盖的空间。一般来说，它运行良好并且享有近乎通用的浏览器支持。但有quirks on mobile, and in iOS in particular .

• 在 iOS 中，返回值会假装 URL 和选项卡栏可见，即使它们不可见。一旦用户滚动并且浏览器切换到最小用户界面，它们就会隐藏。在此过程中窗口高度增加了大约 60px，并且未反射(reflect)在 clientHeight(或 jQuery)中。

• clientHeight 返回 layout viewport, not the visual viewport 的大小，因此不反射(reflect)缩放状态。

所以...在移动设备上不太好。

何时使用window.innerHeight

您还可以查询另一个属性:window.innerHeight。它

• 返回窗口高度，
• 基于视觉视口(viewport)，即反射(reflect)缩放状态，
• 当浏览器进入最小 UI(移动 Safari)时更新，
• 但是它包括滚动条覆盖的区域。

最后一点意味着您不能将其作为替代品直接放入。此外，它在 IE8 中不受支持，并且在 Firefox 中损坏 prior to FF25 (2013 年 10 月)。

但它可以用作移动设备上的替代品，因为移动浏览器将滚动条显示为临时覆盖层，不会占用视口(viewport)中的空间 - window.innerHeight 和 d.dE。 clientHeight 在这方面返回相同的值。

跨浏览器解决方案

因此，用于找出真实窗口高度的跨浏览器解决方案的工作原理如下(伪代码):

IF the size of browser scroll bars is 0 (overlay)
  RETURN window.innerHeight
ELSE
  RETURN document.documentElement.clientHeight

这里的问题是如何确定给定浏览器的滚动条的大小(宽度)。您需要对其进行测试。这并不是特别困难 - 看看my implementation here或original one by Ben Alman如果你愿意的话。

如果你不想自己动手，你也可以使用我的组件 - jQuery.documentSize - 并完成 $.windowHeight() call .