iOS 7 iPad Safari风景innerHeight / outerHeight布局问题
我们发现iOS 7中Safari浏览器的高度为100％的web应用程序出现问题。window.innerHeight（672px）与window.outerHeight（692px）不匹配，但只能在横向模式下显示。 结果发生的是，在身体高度为100％的应用程序中，您将获得20px的额外空间。 这意味着，当用户在我们的应用程序上滑动时，导航元素被拉到浏览器的后面。 这也意味着在屏幕底部的任何绝对定位的元素最终都是20px。
这个问题也在这个问题在这里概述： IOS 7 – CSS – HTML高度 – 100％= 692px
而在这个暧昧截图中可以看出： 
我们试图做的是绕过这个，所以，直到苹果修复这个错误，我们不必担心它。
这样做的一个方法是绝对定位在iOS 7的身体，但这几乎把额外的20px在页面的顶部，而不是底部：
body { position: absolute; bottom: 0; height: 672px !important; } 任何帮助强迫outerHeight匹配innerHeight，或黑客周围，使我们的用户不能看到这个问题将不胜感激。
就我而言，解决scheme是将定位更改为固定：
@media (orientation:landscape) { html.ipad.ios7 > body { position: fixed; bottom: 0; width:100%; height: 672px !important; } }
我还使用脚本来检测iOS 7的iPad：
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) { $('html').addClass('ipad ios7'); }
简单，更清洁的纯CSS解决scheme：
html { height: 100%; position: fixed; width: 100%; }
iOS 7似乎正确地设置了这个高度。 另外，不需要调整JavaScript事件大小等。由于您正在使用一个全高的应用程序，所以它总是位置固定并不重要。
塞缪尔（Teruel Thorsen）的回答也非常好，但如果网页被添加到iOS家庭中，则会失败。
更直观的修复方法是检查window.navigator.standalone var。
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && !window.navigator.standalone) { $('html').addClass('ipad ios7'); }
这种方式只适用于在Safari中打开，而不是从家里启动。
塞缪尔的答案是最好的，尽pipe如果用户将页面添加到他们的主屏幕（主屏幕页面不显示该错误）它会中断。 在添加类之前检查innerHeight，如下所示：
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) { if(window.innerHeight==672){ $('html').addClass('ipad ios7'); } }
请注意，该错误也不会在webview下显示。
我使用这个JavaScript解决scheme来解决这个问题：
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && window.innerHeight != document.documentElement.clientHeight) { var fixViewportHeight = function() { document.documentElement.style.height = window.innerHeight + "px"; if (document.body.scrollTop !== 0) { window.scrollTo(0, 0); } }.bind(this); window.addEventListener("scroll", fixViewportHeight, false); window.addEventListener("orientationchange", fixViewportHeight, false); fixViewportHeight(); document.body.style.webkitTransform = "translate3d(0,0,0)"; }
塞缪尔的方法的一个变种，但与位置：-webkit粘在HTML上设置为我工作最好的。
@media (orientation:landscape) { html.ipad.ios7 { position: -webkit-sticky; top: 0; width: 100%; height: 672px !important; } }
注意'top：0'，而不是'bottom：0'，目标元素是'html'，而不是'body'
基本上有两个错误 – 横向模式窗口的高度和用户从纵向模式重新运行时的滚动位置。 我们已经这样解决了：
窗户的高度由以下几点控制：
// window.innerHeight is not supported by IE var winH = window.innerHeight ? window.innerHeight : $(window).height(); // set the hight of you app $('#yourAppID').css('height', winH); // scroll to top window.scrollTo(0,0);
现在，上面可以放入一个函数，并绑定到窗口resize和/或方向更改事件。 就是这样…看例子：
你需要JavaScript来解决这个错误。 window.innerHeight有正确的高度。 这是我能想到的最简单的解决scheme：
$(function() { function fixHeightOnIOS7() { var fixedHeight = Math.min( $(window).height(), // This is smaller on Desktop window.innerHeight || Infinity // This is smaller on iOS7 ); $('body').height(fixedHeight); } $(window).on('resize orientationchange', fixHeightOnIOS7); fixHeightOnIOS7(); });
您还需要设置position: fixed在<body> 。
这是一个完整的工作示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <title>iOS7 height bug fix</title> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> $(function() { function fixHeightOnIOS7() { var fixedHeight = Math.min( $(window).height(), window.innerHeight || Infinity ); $('body').height(fixedHeight); } $(window).on('resize orientationchange', fixHeightOnIOS7); fixHeightOnIOS7(); // Generate content var contentHTML = $('#content').html(); for (var i = 0; i < 8; i++) contentHTML += contentHTML; $('#content').html(contentHTML); }); </script> <style> html, body { margin: 0; padding: 0; height: 100%; width: 100%; overflow: auto; position: fixed; } #page-wrapper { height: 100%; position: relative; background: #aaa; } #header, #footer { position: absolute; width: 100%; height: 30px; background-color: #666; color: #fff; } #footer { bottom: 0; } #content { position: absolute; width: 100%; top: 30px; bottom: 30px; overflow: auto; -webkit-overflow-scrolling: touch; } </style> </head> <body> <div id="page-wrapper"> <div id="header">Header</div> <div id="content"> <p>Lorem ipsum dolor sit amet.</p> </div> <div id="footer">Footer</div> </div> </body> </html>
参考已被接受的答案，我也有幸运用以下规则：
html.ipad.ios7 { position: fixed; width: 100%; height: 100%; }
这有一个额外的好处，它似乎停止html元素滚动“下”一个固定的身体元素。
如果我使用这个：
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && !window.navigator.standalone) { $('html').addClass('ipad ios7'); }
在Mac上我的Safari显示相同的HTML类…所以它不能正常工作。
我试图合并一些东西 – 这对我有用，所以我可以在浏览器中进行pipe理，而无需浏览器视图。
jQuery的
if (navigator.userAgent.match(/iPad/i) && (window.orientation) ){ $('html').addClass('ipad '); if (window.innerHeight != window.outerHeight ){ $('html').addClass('browser landscape'); } else{ $('html').addClass('browser portrait'); } }
CSS
@media (orientation:landscape) { html.ipad.browser > body { position: fixed; height: 671px !important; } }
/////有了这个，你就更加灵活了，或者其他的操作系统和浏览器
我遇到了同一个问题的这个页面。 这里有很多有用的答案，其他的不是（对我来说）。
但是，我find了一个解决scheme，在我的情况下工作，并完全独立于哪个操作系统版本和现在或过去或未来的错误。
解释：在全屏模式下开发一个带有几个固定大小模块的web应用程序（没有本机应用程序），类名称为“module”
.module {position:absolute; top:0; right:0; bottom:0; left:0;}
其中包含类名“footer”的页脚
.module > .footer {position:absolute; right:0; bottom:0; left:0; height:90px;}
没关系，如果我将页脚的高度设置到另一个高度，或者甚至将其高度设置为其内容，我可以使用下面的代码进行更正：
function res_mod(){ $('.module').css('bottom', 0); // <-- need to be reset before calculation var h = $('.module > .footer').height(); var w = window.innerHeight; var o = $('.module > .footer').offset(); var d = Math.floor(( w - o.top - h )*( -1 )); $('.module').css('bottom',d+'px'); // <--- this makes the correction } $(window).on('resize orientationchange', res_mod); $(document).ready(function(){ res_mod(); });
由于Matteo Spinelli的技术，我仍然可以使用iScroll，没有任何问题，因为它的变化事件幸运地被解雇了。 如果没有，那么纠正之后需要重新调用iScroll-init。
希望这有助于某人
当collections栏显示时，接受的答案不适用。 这里是改进的捕获所有修复：
@media (orientation:landscape) { html.ipad.ios7 > body { position: fixed; height: calc(100vh - 20px); width:100%; } }
如果你尝试的话
html{ bottom: 0;padding:0;margin:0}body { position: absolute; bottom: 0; height: 672px !important; }
