web-dev-qa-db-ja.com

iOS9.xの埋め込みFacebookブラウザのビューポート/ページの高さが間違っています

IOS 9.xのFacebookアプリに埋め込まれたブラウザーで core-layout から demo アプリケーションを開くと、（少なくとも）デバイスの場合はフッター要素が表示されませんポートレートモードです。デバイスを横向きモードに回転させると、フッターが部分的に表示されます。ただし、フッター（ボタン付き）は完全に表示されている必要があります。

最初の画像は、デモアプリがどのように見えるかを示し、2番目の画像は、Facebookアプリの埋め込みWebで表示したときにデモアプリにフッターがないことを示しています。ビュー（画像はChromeデスクトップブラウザから取得され、バグがどのように現れるかを示しています）：

How the demo _should_ look.Demo with missing footer.

多くの異なる仮説をテストした後、バグはブラウザがページ/ビューポートを表示領域よりも高くしたことが原因であると結論付けました。

このバグは iOS9 Safariビューポートの問題、メタが適切にスケーリングされない？ および iOS 8のTwitterアプリでWebページの高さが100％にならない に関連しているようです。

htmlioscssfacebookembedded-browser
14
Martin Thorsen Ranang

私たちが思いついた解決策は、詳細に細心の注意を払いながら、StackOverflowで見つけた他の回答の組み合わせでした。以下の変更のいくつかを実装しただけで修正されなかったことを強調します不具合; all変更を加える必要がありました。

  • 折り返し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、not1である必要がありました。これにより、 html-minifier を適用したビルドプロセスの1つで修正が失敗し、10進値が整数値に置き換えられました。 html-minifierの問題は、viewportメタタグを<!-- htmlmin:ignore -->コメントで囲むことで修正されました。

11
Martin Thorsen Ranang

同じ問題がありましたが、私がしなければならなかったのは、window.innerHeightの代わりにdocument.body.clientHeightを使用することだけでした。

1
Craigo

高さのバグの理由を理解するには、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);
}

P.S.同じバグが幅の計算にある可能性があります、screen.widthはそれを助けます

1
Dmitriy Sakhno

マーティンの答えに代わるものを探している人は、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();
  ...
0
gowithefloww