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 。 它
最后一点意味着你不能只是放弃它作为替代品。 此外，它在IE8中不受支持，并且在FF25之前的Firefox（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
这里的问题是如何确定给定浏览器的滚动条的大小（宽度）。 你需要为它运行一个测试。 这并不是特别困难 - 如果你愿意的话，可以看看我在这里的实现或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浏览器特定代码。
首先从设备开始排除可以运行Safari的iPad和桌面等。 然后，第二步就排除了可能在这些设备上运行的Chrome和其他浏览器。
这里有一个更深入的细节为什么我这样做 - http://www.ethanhackett.com/?blog=window-height-100-on-mobile-safari-coding-solution
链接地址: http://www.djcxy.com/p/51879.html