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

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

第一张图片显示了演示应用程序的外观，第二张图片显示了如何使用Facebook应用程序的embedded式Web视图查看演示应用程序缺less页脚（图像是从Chrome桌面浏览器获取的，说明了该错误是如何体现的） ：

在testing了很多不同的假设之后，我们得出结论，这个错误是由于浏览器使得页面/视口高于可见区域而造成的。

这个bug似乎与iOS9的Safari浏览器问题有关，meta不能正确缩放？ 网页在iOS 8上的Twitter应用程序中没有达到100％的高度 。

Answer 1

我们提出的解决scheme是我们在StackOverflow上find的其他解决scheme的组合 ，同时对细节给予了高度关注。 我会强调，实施下面的一些改变并不能解决这个问题。 所有的变化都必须作出。

• 定义包装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标签必须是

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

  但是，规模值必须是1.0 ， 而不是 1 ; 导致修复在我们应用html-minifier的构build过程之一中被破坏 ，这个html-minifier用整数代替了十进制值。 html-minifier问题是通过用<!-- htmlmin:ignore -->注释包围viewport元标记来解决的。

Answer 2

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

Answer 3

对于那些正在寻找马丁的答案替代品，你也可以更新你的CSS，当你检测Facebook的应用程序浏览器 。

我的问题基本上与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(); ...