使用iOS 7.1 Minimal-UI从肖像切换到景观时可见的灰色区域

Question

在我正在处理的Web应用程序中，我尝试了iOS 7.1的新minimal-ui功能（请参阅带有Minimal-ui Meta标签的iOS 7.1中的Safari Fullscreen），但我看到当我从肖像切换到景观时，底部出现了84px高的灰色区域的问题。另外，document.body.scrollTop切换到景观后变为64。

您可以使用此" Hello World" Web应用程序看到问题：http：//www.creativepulse.gr/media/blog/2014/20140123-hello-world/example.html

当我在iOS 7.1 iPhone视网膜模拟器上加载该应用程序时，在肖像模式下一切都很好。但是，切换到景观，立即出现灰色区域。

解决此问题的好方法是什么？

Answer 1

页面渲染后滚动到顶部有助于我。它以某种方式导致重新读取，而灰色盒子消失了，但是我无法解释Safari在内部的确做什么：

window.scrollTo(0, 0);

Answer 2

我尝试了一段时间以无运气来解决此问题。我终于决定在我的位置进行测试：

1. 使用minimal-ui meta标签创建了一个新的HTML文档。
2. 将文档的主体留为空的（无HTML标签），没有样式。

测试了此问题，并且问题仍然发生。

我能得出的唯一结论是，这是iOS 7.1 中的一个错误，因此我向Apple提交了一个错误报告。报告为错误＃：16335579 。

请注意，Kraftwer1先生的解决方案对我有用（这是一个黑客，但必须这样做直到Apple解决此问题）。也就是说，添加... window.scrollTo(0, 0); orientationChange工作。

最后，我还想提到，将有关此问题的其他错误报告提交给Apple将在其队列中提高优先级。

Answer 3

到目前为止，问题确实确实是iOS 7.0和7.1中的错误。我只能在景观中使用设备时重现它。

它发生在我知道的三种情况下，在所有情况下，window.scrollTo(0, 0) hack都可以解决它。

1. 将设备旋转成景观时。可以解决：

   $(window).on('orientationchange', function () {
     window.scrollTo(0, 0);
   });
   

2. 从文档底部拖动时。通过处理scroll事件解决：

   $(window).on('scroll', function () {
     var focusedElement;
     if ($(document).scrollTop() !== 0) {
       focusedElement = $(':focus');
       if (!(focusedElement.is('input') || focusedElement.is('textarea'))) window.scrollTo(0, 0);
     }
   });
   

   需要重点元素的例外，因为当屏幕键盘打开时，它也会在窗口中触发滚动事件。

3. 关闭键盘时，所有元素都会失去焦点：

   formLayer.on('blur', 'input, textarea', function () {
     if (!$(':focus').length) window.scrollTo(0, 0);
   });
   

由于此问题仅与iOS版本7.0和7.1有关，因此最好将此黑客限制为以下表达式：

var buggyIOS = /b(?:iPhone|iPod|iPad).*?bOS 7_[01]/.test(window.navigator.userAgent);

Answer 4

在window.scrollTo(0,0)解决方案上进行完善，我将自我封装在自我中，描述了立即调用函数表达式并在文档Ready和窗口上执行：

(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修复移动野生动物园或其他作品。

Answer 5

我发现的最好的修复程序是亚历山大·科尔达（Alexander Koleda）的这里。

window.addEventListener('scroll', function () {
    if (document.activeElement === document.body && window.scrollY > 0) {
        document.body.scrollTop = 0;
    }
}, true);

当您滚动到底部时，这也可以修复灰色条。

Answer 6

<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui=1, user-scalable=no">

只需删除为我摆脱它的最小UI即可。

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

Answer 7

我正在阅读这篇文章，试图避免同一问题并找到另一种方法。

首先，让我们检测设备是否旋转（我们稍后可以检测到肖像或景观），以便我要设置一个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
        }
    }); 

我希望这可以帮助您！