Mobile Safari $（窗口）.height（）URL栏差异
我试图设置一个固定的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'}); }); }); 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()调用 。
这是由于jQuery的.height（）方法中的一个错误。
要获得正确的高度，您可以使用：
$('#right-sidebar').height(window.innerHeight);
要确保您大多数是跨浏览器兼容的，您可以这样做：
var height = window.innerHeight ? window.innerHeight : $(window).height(); $('#right-sidebar').height(height);
我主要说，如果有一个底部滚动条，这将开始表现得很有趣。
这是我如何弄明白的。 这是一个两步的过程。
步骤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'}); }; });
然后在需要时使用mobileSafari变量来执行特定于移动safari的代码。
从设备开始首先排除iPad和台式机等也可以运行Safari。 然后第二步排除Chrome和其他可能在这些设备上运行的浏览器。
这里有一个更深入的细分我为什么这样做 – http://www.ethanhackett.com/?blog=window-height-100-on-mobile-safari-coding-solution
如果移动safari是唯一一个为您提供问题的浏览器，您可以始终专门定位该浏览器，并从总高度中减去URL栏高度。 您可以通过跟踪和错误找到URL栏高度，我不知道它有多高