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

Question

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

第一张图片显示了演示应用程序应该的外观，而第二张图片显示了使用 Facebook 应用程序的嵌入式 Web 视图查看演示应用程序时缺少页脚的情况（图像是从Chrome 桌面浏览器说明了错误是如何表现出来的）：

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

这个错误似乎与iOS9 Safari viewport issues, meta not scaling properly? 和Web page not getting 100% height in Twitter app on iOS 8 有关。

Answer 1

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

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

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

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

为了检测应用程序何时在 facebook 应用内浏览器中打开，我使用这里的函数 How to detect Facebook in-app browser?

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

附：同样的错误可能与宽度计算有关，screen.width 会有所帮助

Answer 2

对于那些寻找替代 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();
  ...

Answer 3

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

Answer 4

我们提出的解决方案是我们在 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();
  

• 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 问题已通过用<!-- htmlmin:ignore --> cmets 包围viewport 元标记得到解决。