jQuery Mobile Safari $(window).height() URL 栏差异

Mobile Safari $(window).height() URL bar discrepancy

提问by Ethan H

I'm trying to set a fixed div that's 100% the window height. But mobile safari doesn't detect the correct window height. It always thinks that the URL bar is part of the equation.

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

This is what I'm using currently but it doesn't account for the URL bar.

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

回答by hashchange

Tldr

域名

If you just want to query the window height, cross-browser, and be done with it, use jQuery.documentSizeand call $.windowHeight(). For implementing your own solution, read on.

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

When to use jQuery or the clientHeightof the document

何时使用 jQuery 或clientHeight文档的

jQuery's $(window).height()is a wrapper for document.documentElement.clientHeight. It gives you the height of the viewport, excluding the space covered by browser scroll bars. Generally, it works fine and enjoys near-universal browser support. But there are quirks on mobile, and in iOS in particular.

jQuery$(window).height()是document.documentElement.clientHeight. 它为您提供视口的高度，不包括浏览器滚动条覆盖的空间。一般来说，它运行良好，并享有近乎普遍的浏览器支持。但是在移动设备上有一些怪癖，尤其是在 iOS 中。

• In iOS, the return value pretends that the URL and tab bars are visible, even if they are not. They get hidden as soon as the user scrolls and the browser switches to minimal UI. Window height is increased by roughly 60px in the process, and that is notreflected in the clientHeight(or in jQuery).

• The clientHeightreturns the size of the layout viewport, not the visual viewport, and therefore does not reflect the zoom state.

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

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

So... not quite so great on mobile.

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

When to use window.innerHeight

何时使用 window.innerHeight

There is another property you can query: window.innerHeight. It

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

• returns the window height,
• is based on the visual viewport, ie reflects the zoom state,
• is updated when the browser enters minimal UI (mobile Safari),
• butit includes the area covered by scroll bars.

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

The last point means that you can't just drop it in as a replacement. Also, it is not supported in IE8, and broken in Firefox prior to FF25(October 2013).

最后一点意味着你不能把它当作替代品。此外，它在 IE8 中不受支持，并且在FF25（2013 年 10 月）之前在 Firefox 中被破坏。

But it can be used as a replacement on mobile because mobile browsers present scroll bars as a temporary overlay which does not consume space in the viewport - window.innerHeightand d.dE.clientHeightreturn the same value in that regard.

但它可以用作移动设备上的替代品，因为移动浏览器将滚动条呈现为不占用视口空间的临时覆盖 -window.innerHeight并d.dE.clientHeight在这方面返回相同的值。

Cross-browser solution

跨浏览器解决方案

So a cross-browser solution, for finding out the real window height, works like this (pseudo code):

因此，用于找出真实窗口高度的跨浏览器解决方案的工作方式如下（伪代码）：

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

The catch here is how to determine the size (width) of the scroll bars for a given browser. You need to run a test for it. It's not particularly difficult - have a look at my implementation hereor the original one by Ben Almanif you wish.

这里的问题是如何确定给定浏览器的滚动条的大小（宽度）。你需要为它运行一个测试。这并不是特别困难 -如果您愿意，可以查看我的实现here或Ben Alman的原始实现。

If you don't want to roll your own, you can also use a component of mine - jQuery.documentSize- and be done with a $.windowHeight()call.

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

回答by Jai

This is due to a bug in jQuery's .height() method.

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

To get the correct height you can use:

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

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

To make sure you are mostlycross browser compatible you can do this:

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

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

I say mostly as this will start to behave funny if there is a bottom scroll bar.

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

回答by Ethan H

Here's how I figured it out. Its a two step process.

这就是我想出来的方法。它是一个两步过程。

Step 1 - Check to see if the device is an iPhone or an iPod.

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

Step 2 - If it is then check to see if the browser is safari

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

Then use the mobileSafari variable whenever needed to execute mobile safari specific code.

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

Starting with the device first rules out iPads and desktops etc which can also run Safari. Then the second step rules out Chrome and other browsers which can potentially run on these devices.

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

Here's a more in depth breakdown of why I did it this way - http://www.ethanhackett.com/?blog=window-height-100-on-mobile-safari-coding-solution

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

回答by Huangism

If mobile safari is the only browser giving you the issue, you can always target that browser specifically and minus the URL bar height from your total height. You can find the URL bar height by trail and error, I have no idea how tall it is

如果移动 safari 是唯一给您带来问题的浏览器，您始终可以专门针对该浏览器，并从总高度中减去 URL 栏高度。您可以通过跟踪和错误找到网址栏的高度，我不知道它有多高