Question

我正在设置一个固定的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'});
    });
});

Answer 1

Tldr

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

何时使用jQuery或文档的clientHeight

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

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

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

何时使用window.innerHeight

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

返回窗口高度
基于视觉视口，即反映缩放状态，
会更新
但它包含滚动条覆盖的区域。

最后一点意味着您不能将其作为替代品放入。此外，它在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完成。

Answer 2

这是由于jQuery的.height（）方法中存在错误。

要获得正确的高度，您可以使用：

$('#right-sidebar').height(window.innerHeight);

为了确保您主要跨浏览器兼容，您可以执行以下操作：

var height = window.innerHeight ? window.innerHeight : $(window).height();
$('#right-sidebar').height(height);

我主要是说，如果有一个底部滚动条，这将开始表现得很有趣。

Answer 3

以下是我弄清楚的方法。这是一个两步过程。

步骤1 - 检查设备是iPhone还是iPod。

步骤2 - 如果是，则检查浏览器是否为safari

// On document ready set the div height to window
$(document).ready(function(){ 

    // Assign a variable for the application being used
    var nVer = navigator.appVersion;
    // Assign a variable for the device being used
    var nAgt = navigator.userAgent;
    var nameOffset,verOffset,ix;


    // First check to see if the platform is an iPhone or iPod
    if(navigator.platform == 'iPhone' || navigator.platform == 'iPod'){
        // In Safari, the true version is after "Safari" 
        if ((verOffset=nAgt.indexOf('Safari'))!=-1) {
          // Set a variable to use later
          var mobileSafari = 'Safari';
        }
    }

    // If is mobile Safari set window height +60
    if (mobileSafari == 'Safari') { 
        // Height + 60px
        $('#right-sidebar').css('height',(($(window).height()) + 60)+'px');
    } else {
        // Else use the default window height
        $('#right-sidebar, .profile').css({'height':(($(window).height()))+'px'});  
    };


});

// On window resize run through the sizing again
$(window).resize(function(){
    // If is mobile Safari set window height +60
    if (mobileSafari == 'Safari') { 
        // Height + 60px
        $('#right-sidebar').css('height',(($(window).height()) + 60)+'px');
    } else {
        // Else use the default window height
        $('#right-sidebar, .profile').css({'height':(($(window).height()))+'px'});  
    };
});

然后在需要时使用mobileSafari变量来执行特定于移动safari的代码。

从设备开始，首先排除可以运行Safari的iPad和桌面等。然后第二步排除Chrome和其他可能在这些设备上运行的浏览器。

以下是对我这样做的原因的更深入分析 - http://www.ethanhackett.com/?blog=window-height-100-on-mobile-safari-coding-solution

Answer 4

如果移动版Safari是唯一能够解决此问题的浏览器，则您始终可以专门定位该浏览器，并从总高度中减去网址栏高度。您可以通过跟踪和错误找到URL栏高度，我不知道它有多高

Mobile Safari $（窗口）.height（）URL栏差异

4 个答案: