Mobile Safari $(window).height() URL 栏差异 [英] Mobile Safari $(window).height() URL bar discrepancy

问题描述

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

这是我目前使用的，但它不考虑 URL 栏.

$(function(){$(document).ready(function(){//加载时警报($.浏览器)；$('#right-sidebar').css({'height':(($(window).height()))+'px'});});$(window).resize(function(){//调整大小$('#right-sidebar').css({'height':(($(window).height()))+'px'});});});

解决方案

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 中不受支持，在 Firefox 中被破坏 FF25 之前(2013 年 10 月).

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

跨浏览器解决方案

所以一个跨浏览器的解决方案，用于找出真实的窗口高度，是这样工作的(伪代码):

如果浏览器滚动条的大小为​​0(叠加)返回 window.innerHeight别的返回 document.documentElement.clientHeight

这里的问题是如何确定给定浏览器的滚动条的大小(宽度).你需要为它运行一个测试.这不是特别困难 - 看看 我在此处的实现 或 Ben Alman 的原始实现，如果您愿望.

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

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.

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

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

解决方案

Tldr

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

When to use jQuery or the clientHeight of the document

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.

• 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 not reflected in the clientHeight (or in jQuery).

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

So... not quite so great on mobile.

When to use window.innerHeight

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

• 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),
• but it includes the area covered by scroll bars.

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).

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.innerHeight and d.dE.clientHeight return the same value in that regard.

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 here or the original one by Ben Alman if you wish.

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.

这篇关于Mobile Safari $(window).height() URL 栏差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！