iOS 9.x中嵌入式Facebook瀏覽器中的視口/頁面高度錯誤

Question

當使用iOS 9.x上的Facebook應用程序中的嵌入式瀏覽器從核心布局打開演示應用程序時（至少），當設備處於縱向模式時，頁腳元素不可見。 如果將設備旋轉到橫向模式，則頁腳將部分可見。 但是，頁腳（帶按鈕）應該完全可見。

第一張圖片顯示的演示應用程序應該如何看，而第二圖像顯示了如何使用Facebook的應用程序的嵌入式Web視圖（圖片均來自說明錯誤是如何表現一個Chrome桌面瀏覽器搶下）查看時演示程序缺少頁腳：

在測試了許多不同的假設之后，我們得出結論，該錯誤是由瀏覽器使頁面/視口高於可見區域引起的。

這個bug似乎與iOS9 Safari視口問題有關，meta不能正確縮放？ 在iOS 8上的Twitter應用程序中，網頁沒有達到100％的高度 。

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 ，它用整數替換了十進制值。 通過使用<!-- htmlmin:ignore --> comments包圍viewport元標記來修復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應用程序內瀏覽器中打開應用程序我使用此處的功能如何檢測Facebook應用內瀏覽器？

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

PS同樣的錯誤可能是寬度計算，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();
  ...