iOS 9.x中嵌入式Facebook浏览器中的视口/页面高度错误

Question

当使用iOS 9.x上的Facebook应用程序中的嵌入式浏览器从核心布局打开演示应用程序时(至少),当设备处于纵向模式时,页脚元素不可见.如果将设备旋转到横向模式,则页脚将部分可见.但是,页脚(带按钮)应该完全可见.

第一张图片显示的演示应用程序如何应该看看,而第二图像显示了如何使用Facebook的应用程序的嵌入式Web视图(图片均来自说明错误是如何表现一个Chrome桌面浏览器抢下)查看时演示程序缺少页脚:

在测试了许多不同的假设之后,我们得出结论,该错误是由浏览器使页面/视口高于可见区域引起的.

这个bug似乎与iOS9 Safari视口问题有关,meta不能正确缩放？而网页不能在iOS 8 Twitter的应用程序获得100%的高度.

Answer 1

我们提出的解决方案是我们在StackOverflow上找到的其他答案的组合,同时非常注重细节.我要强调的是,实施以下一些变化并没有解决这个问题.必须做出所有改变.

• 必须更改定义包装div元素(#outer-wrap)高度的CSS

  outer-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  

  至

  html, body, #outer-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
  }
  

• 以下函数已添加到库中,并在初始化时调用:

  function _fixViewportHeight() {
      var html = document.querySelector('html');
  
      function _onResize(event) {
          html.style.height = window.innerHeight + 'px';
      }
  
      window.addEventListener('resize', _.debounce(_onResize, 125, {
          leading: true,
          maxWait: 250,
          trailing: true
      }));
  
      _onResize();
  }
  
  _fixViewportHeight();
  

• 该viewportmeta标签必须是

  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi">
  

  但是,比例值必须是1.0,而不是 1 ; 这导致修复在我们的一个构建过程中中断,我们应用了html-minifier,它用整数替换了十进制值.通过viewport用<!-- htmlmin:ignore -->注释包围元标记来修复html-minifier问题.