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

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 $(window).height()是一个包装器document.documentElement.clientHeight.它为您提供视口的高度,不包括浏览器滚动条覆盖的空间.一般来说,它工作正常,并享有近乎通用的浏览器支持.但是在移动设备上有一些怪癖,特别是在iOS中.

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

• 在clientHeight返回的大小布局视口,而不是视觉视口,因此不能反映缩放状态.

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

何时使用 window.innerHeight

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

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

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

但它可以用作移动设备的替代品,因为移动浏览器将滚动条显示为临时覆盖,不会消耗视口中的空间 - window.innerHeight并且d.dE.clientHeight在这方面返回相同的值.

跨浏览器解决方案

因此,用于查找实际窗口高度的跨浏览器解决方案就像这样工作(伪代码):

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

这里的问题是如何确定给定浏览器的滚动条的大小(宽度).你需要为它运行一个测试.这并不是特别困难 - 如果你愿意的话,可以看看我在这里的实施或Ben Alman的原创实现.

如果您不想自己动手,也可以使用我的组件--jQuery.documentSize - 并通过$.windowHeight()调用完成.

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'});  
    };
});

然后在需要执行 mobile safari 特定代码时使用 mobileSafari 变量。

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

这是我为什么这样做的更深入的细分 - http://www.ethanhackett.com/?blog=window-height-100-on-mobile-safari-coding-solution