it-swarm.com.de

Falsches Ansichtsfenster/falsche Seitenhöhe im eingebetteten Facebook-Browser in iOS 9.x.

Beim Öffnen der Demo Anwendung aus Core-Layout mit dem eingebetteten Browser in der Facebook-App auf iOS 9.x (mindestens) ist das Fußzeilenelement nicht sichtbar, wenn sich das Gerät im Hochformat befindet. Wenn Sie das Gerät in den Querformatmodus drehen, ist die Fußzeile teilweise sichtbar. Die Fußzeile (mit einem Knopf) sollte jedoch vollständig sichtbar sein.

Das erste Bild zeigt, wie die Demo-App sollte aussehen, während das zweite Bild zeigt, wie in der eingebetteten Webansicht der Facebook-App die Fußzeile fehlt (die Bilder wurden von einem Chrome-Desktop-Browser aufgenommen, der dies veranschaulicht) wie sich der Fehler manifestiert):

 How the demo _should_ look.  Demo with missing footer.

Nachdem wir viele verschiedene Hypothesen getestet hatten, stellten wir fest, dass der Fehler durch den Browser verursacht wurde, der die Seite/das Ansichtsfenster höher als den sichtbaren Bereich machte.

Dieser Fehler hing anscheinend mit Problemen mit dem iOS9-Safari-Ansichtsfenster zusammen, Meta-Skalierung nicht richtig? und Webseite wird in der Twitter-App unter iOS 8 nicht 100% größer .

12

Die Lösung, die wir gefunden haben, war eine Kombination von anderen Antworten, die wir auf StackOverflow gefunden haben, wobei wir uns sehr um Details gekümmert haben. Ich werde betonen, dass die Implementierung von nur einigen der folgenden Änderungen nicht den Fehler behoben hat; alle die Änderungen mussten vorgenommen werden.

  • Das CSS, das die Höhe des umhüllenden Elements div (#outer-wrap) definiert, musste von geändert werden

    outer-wrap {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    

    zu

    html, body, #outer-wrap {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      overflow: hidden;
    }
    
  • Die folgende Funktion wurde der Bibliothek hinzugefügt und wird bei der Initialisierung aufgerufen:

    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();
    
  • Das viewport Meta-Tag musste sein

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

    Die Skalenwerte mussten jedoch 1.0 sein, nicht 1; Dadurch brach der Fix in einem unserer Build-Prozesse ab, in dem wir html-minifier verwendeten, wodurch die Dezimalwerte durch ganzzahlige ersetzt wurden. Das HTML-Minifier-Problem wurde behoben, indem das viewport-Meta-Tag mit <!-- htmlmin:ignore -->-Kommentaren umgeben wurde.

10

Hatte das gleiche Problem, aber ich musste nur window.innerHeight anstelle von document.body.clientHeight verwenden.

1
Craigo

Um den Grund für einen Fehler mit der Höhe zu verstehen, müssen Sie wissen, wie der FB-In-App-Browser geöffnet wird: Beim Öffnen wird eine Animation angezeigt und browser die Größe nimmt von unten nach oben zu. Und deswegen kann auf der Startseite von JS berechnete Höhe falsch sein

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

Die Höhe kann geringer sein als die endgültige Seitenhöhe, da JS während des Öffnens der Animation ausgeführt werden kann, während die Browserhöhe noch zunimmt

Ich habe dieses Problem gelöst, indem ich screen.height erreicht habe, was immer konstant ist

um zu erkennen, wann die App im Facebook-In-App-Browser geöffnet ist, benutze ich die Funktion von hier Wie erkennt man den Facebook-In-App-Browser?

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

P.S. Der gleiche Fehler könnte bei der Breitenberechnung auftreten, screen.width hilft dabei

1
Dmitriy Sakhno

Wenn Sie nach Alternativen zu Martins Antwort suchen, können Sie auch Ihr CSS aktualisieren, wenn Sie den In-App-Browser von Facebook erkennen .

Mein Problem betraf im Wesentlichen CSS: Die unteren Elemente wurden ausgeblendet.

function adaptCSSFbBrowser() {
  var ua = navigator.userAgent || navigator.vendor || window.opera;
  if (isFacebookApp(ua)) { // Facebook in-app browser detected
      $('.bottombar').css('height', '50vh'); // Update css
  }
};

Und dann :

$(document).ready(function() {
  adaptCSSFbBrowser();
  ...
0
gowithefloww