13

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

3 回答 3

14

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()call完成。

于 2015-07-27T14:14:36.320 回答
12

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

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

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

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

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

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

于 2014-03-24T20:36:43.907 回答
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'});  
    };
});

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

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

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

于 2013-01-19T00:16:44.157 回答