iOS 9.x 中嵌入式 Facebook 浏览器的 viewport/page 高度错误

Wrong viewport/page height in embedded Facebook browser in iOS 9.x

在 iOS 9.x（至少）的 Facebook 应用程序中使用嵌入式浏览器打开 demo application from core-layout 时，设备处于纵向模式时页脚元素不可见.如果将设备旋转到横向模式，页脚将部分可见。但是，页脚（带有按钮）应该完全可见。

第一张图片展示了演示应用应该的样子，而第二张图片展示了在使用 Facebook 应用的嵌入式网络视图（图片是从 Chrome 桌面浏览器中抓取的，说明了错误是如何表现出来的）：

在测试了很多不同的假设后，我们得出结论，该错误是由浏览器使 page/viewport 高于可见区域引起的。

这个错误似乎与 and Web page not getting 100% height in Twitter app on iOS 8 有关。

我们提出的解决方案是 组合 我们在 Whosebug 上找到的其他答案，同时非常注重细节。我要强调的是，仅实施以下更改中的 一些 确实 没有 修复错误； 全部 必须进行更改。

  • 定义包装 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();

  • viewport 元标记必须是

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

    但是，比例值必须是1.0，而不是 1；这导致修复在我们应用 html-minifier 的一个构建过程中中断，它将小数值替换为整数。 html-minifier 问题已通过在 viewport 元标记周围加上 <!-- htmlmin:ignore --> 评论来解决。

有同样的问题，但我所要做的就是使用 window.innerHeight，而不是 document.body.clientHeight。

对于那些寻找 Martin 答案的替代方案的人，您还可以 在检测到 Facebook 应用程序内浏览器时更新 CSS。

我的问题本质上是 CSS 相关的：底部元素被隐藏了。

function adaptCSSFbBrowser() {
  var ua = navigator.userAgent || navigator.vendor || window.opera;
  if (isFacebookApp(ua)) { // Facebook in-app browser detected
      $('.bottombar').css('height', '50vh'); // Update css
  }
};

然后：

$(document).ready(function() {
  adaptCSSFbBrowser();
  ...

要了解高度错误的原因，您需要了解 FB 应用程序内浏览器如何打开：它在打开时有动画并且 浏览器 大小从下到上增加. 这就是为什么在起始页上 JS 计算的高度可能不正确

  • window.innerHeight,
  • document.documentElement.clientHeight,
  • document.body.clientHeight
  • element.style.height='100vh'

高度可能小于最终页面高度，因为 JS 可以在打开动画期间执行，而浏览器高度仍在增加

我已经通过达到 screen.height 解决了这个问题，它总是不变的

为了检测应用何时在 Facebook 应用内浏览器中打开，我使用了此处的功能 

function isFacebookApp() {
    var ua = navigator.userAgent || navigator.vendor || window.opera;
    return (ua.indexOf('FBAN') > -1) || (ua.indexOf('FBAV') > -1);
}

P.S。同样的错误可能与宽度计算有关，screen.width 会帮助它