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

Question

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

第一张图片显示了演示应用应该的外观，而第二张图显示了使用Facebook应用的嵌入式网页视图（图像）观看演示应用是如何丢失页脚的从Chrome桌面浏览器中抓取，说明了错误的显示方式）：

  

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

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

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();
  

• 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的一个构建过程中中断，后者用整数值替换了十进制值。通过使用viewport条评论围绕<!-- htmlmin:ignore -->元标记来修复html-minifier问题。

Answer 2

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

Answer 3

要了解高度错误的原因，您需要了解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);
}

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

Answer 4

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