14

iOS 9.x (以上) の Facebook アプリに埋め込まれたブラウザーを使用してコア レイアウトからデモアプリケーションを開くと、デバイスが縦向きモードの場合、フッター要素が表示されません。デバイスを横向きモードに回転すると、フッターが部分的に表示されます。ただし、フッター (ボタン付き) は完全に表示される必要があります。

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

デモがどのように見えるべきか。 フッターが欠落しているデモ。

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

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

4

4 に答える 4

11

私たちが思いついた解決策は、詳細に細心の注意を払いながら、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である必要があります。これにより、10 進数値を整数値に置き換えたhtml-minifierを適用したビルド プロセスの 1 つで修正が中断されました。viewporthtml-minifier の問題は、メタ タグを<!-- htmlmin:ignore -->コメントで囲むことで修正されました。

于 2016-02-15T23:49:48.453 に答える
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 に答える