14

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

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

演示应该如何看待。 缺少页脚的演示。

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

这个错误似乎与iOS9 Safari 视口问题有关，meta 没有正确缩放？并且网页在 iOS 8 上的 Twitter 应用程序中没有达到 100% 的高度。

4

4 回答 4

11

我们提出的解决方案结合了我们在 StackOverflow 上找到的其他答案，同时非常注重细节。我要强调的是，仅实施以下一些更改并不能修复错误；必须做出所有改变。

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

    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 -->

于 2016-02-15T23:49:48.453 回答
1

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

于 2016-06-11T22:32:16.187 回答
1

对于那些寻找替代马丁答案的人，您还可以在检测到 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();
  ...
于 2017-09-03T15:40:12.047 回答
1

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

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

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

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

检测何时在 facebook 应用内浏览器中打开应用我使用此处的功能如何检测 Facebook 应用内浏览器？

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

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

于 2019-05-02T15:13:22.820 回答