在我正在开发的 Web 应用程序中，我尝试了 iOS 7.1 的新minimal-ui功能（请参阅iOS 7.1中的 safari fullscreen with minimum-ui meta tag），但我看到一个问题，即 84px 高的灰色区域出现在当我从纵向切换到横向时，底部。此外，document.body.scrollTop切换到横向后变为 64。
您可以使用此“Hello World”网络应用程序查看问题：http ://www.creativepulse.gr/media/blog/2014/20140123-hello-world/example.html
当我在 iOS 7.1 iPhone Retina Simulator 上的 Mobile Safari 中加载应用程序时，纵向模式下一切正常。然而，切换到横向，灰色区域立即出现。
解决此问题的好方法是什么？
页面呈现后滚动到顶部对我有帮助。它以某种方式导致重新渲染并且灰色框消失了，但是我无法解释 Safari 在内部到底做了什么：
window.scrollTo(0, 0);
我尝试了一段时间来解决这个问题，但没有运气。我终于决定做一个测试，我：
minimal-ui使用meta 标签创建了一个新的 HTML 文档。对此进行了测试，问题仍然存在。
我能得出的唯一结论是这是 IOS 7.1 中的一个错误，所以我向 Apple 提交了一个错误报告。报告为BUG #: 16335579。
请注意，kraftwer1 先生的解决方案对我有用（这是一个 hack，但在 Apple 修复此问题之前必须这样做）。也就是说，在工作window.scrollTo(0, 0);之后添加...。orientationChange
最后，我只想提一下，向 Apple 提交有关此问题的其他错误报告将提高其在队列中的优先级。
The issue does indeed seem to be a bug in iOS 7.0 and 7.1 so far. I've only been able to reproduce it when using the device in landscape.
It happens in three situations that I know of, and in all cases the window.scrollTo(0, 0) hack resolves it.
When rotating the device into landscape. Can be resolved with:
$(window).on('orientationchange', function () {
window.scrollTo(0, 0);
});
When dragging from the bottom of the document. Resolved by handling the scroll event:
$(window).on('scroll', function () {
var focusedElement;
if ($(document).scrollTop() !== 0) {
focusedElement = $(':focus');
if (!(focusedElement.is('input') || focusedElement.is('textarea'))) window.scrollTo(0, 0);
}
});
The exceptions for the focused elements are necessary because when the screen keyboard opens, it will also trigger a scroll event in the window.
When closing the keyboard—then, all elements lose focus:
formLayer.on('blur', 'input, textarea', function () {
if (!$(':focus').length) window.scrollTo(0, 0);
});
Since this issue is only relevant to iOS versions 7.0 and 7.1, it is better to limit this hack to the following expression:
var buggyIOS = /\b(?:iPhone|iPod|iPad).*?\bOS 7_[01]/.test(window.navigator.userAgent);
改进window.scrollTo(0,0)解决方案，我封装在一个自我描述的立即调用函数表达式中，并在文档准备好和窗口调整大小时执行：
(function minimalUiFix() {
var fix = function () {
window.scrollTo(0,0);
};
$(fix);
$(window).on('resize.minimal-ui-fix', fix);
})();
好处是所有与变通相关的代码都封装在一起，变通的原因在函数名称中描述。这可以保护我漂亮的代码的其余部分不被奇怪的工作污染（太多）。
发生了很多事情，但我在这个jsbin中使用它。
这个技巧似乎对我不起作用。看看这个jsbin。我这里的东西很简单：一个固定位置的容器，隐藏溢出，应该占据整个屏幕。滚动应该是不可能的，但是，我仍然得到一些意想不到的可滚动空间。这个技巧所做的就是滚动回到顶部。它并没有消除导致真正问题的神秘额外空间。
但是，除了准备好和调整大小之外，在滚动上应用修复似乎是我能找到的最接近体面的工作。
(function minimalUiFix() {
var fix = function () { window.scrollTo(0,0); };
$(fix);
$(window).on('resize.minimal-ui-fix', fix);
$(window).on('scroll.minimal-ui-fix', fix);
})();
在 Apple 修复 Mobile Safari 或发现其他解决方法之前，我认为这是我们所能期待的最好的结果。
我找到的最好的解决方法是Alexander Koleda。
window.addEventListener('scroll', function () {
if (document.activeElement === document.body && window.scrollY > 0) {
document.body.scrollTop = 0;
}
}, true);
当您滚动到底部时，这也会修复灰色条。
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui=1, user-scalable=no">
只需删除 Minimal-UI，它就为我摆脱了它。
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
我正在阅读这篇文章，试图避免同样的问题，并找到了另一种方法。
首先让我们检测设备是否旋转（我们也可以稍后检测是纵向还是横向），为此我将设置一个 var 来检查来自 JS 的媒体查询：
var mql = window.matchMedia("(orientation: portrait)");
然后我们可以监听是否有任何变化并重写视口：
mql.addListener(function(m) {
$('meta[name="viewport"]').attr("content","width=device-width, user-scalable=no, maximum-scale=1.2"); // No matter if is landscape or portrait
});
或者我们可以更具体一些，为横向/纵向触发一些不同的东西
mql.addListener(function(m) {
if(m.matches) {
$('meta[name="viewport"]').attr("content","width=device-width, user-scalable=no, maximum-scale=1.2"); // Portrait
}
else {
$('meta[name="viewport"]').attr("content","width=device-width, user-scalable=no, maximum-scale=1.0"); // Landscape
}
});
我希望这可以帮助你！