移动 Safari $(window).height() URL 栏差异

Question

我正在尝试设置一个 100% 窗口高度的固定 div。但移动 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

这就是我的想法。这是一个两步过程。

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

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

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

这里更深入地解释了我为什么这样做 - http://www.ethanhackett.com/?blog=window-height-100-on-mobile-safari-coding-solution

Answer 2

这是由于 jQuery 的 .height() 方法中的一个错误。

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

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

为了确保您大部分跨浏览器兼容，您可以这样做：

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

我说的主要是因为如果有底部滚动条，这将开始变得有趣。

Answer 3

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 完成。