jquery – Mobile Safari $(窗口).height()URL栏差异

我试图设置一个固定的div,它是窗口高度的100％.但是移动safari没有检测到正确的窗口高度.它总是认为URL栏是等式的一部分.

这是我目前使用的,但它不考虑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'});
    });
});

解决方法

Tldr

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

何时使用jQuery或clientHeight文件

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

>在iOS中,返回值假装URL和标签栏可见,即使它们不可见.一旦用户滚动并且浏览器切换到最小UI,它们就会被隐藏.窗口高度在此过程中增加了大约60px,并且没有反映在clientHeight(或jQuery)中.
> clientHeight返回layout viewport,not the visual viewport的大小,因此不反映缩放状态.

所以…在移动设备上不是那么好.

何时使用window.innerHeight

您可以查询另一个属性：window.innerHeight.它

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

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

但它可以用作移动设备的替代品,因为移动浏览器将滚动条显示为临时覆盖,不会消耗视口中的空间 – 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.