web-dev-qa-db-fra.com

Hauteur d'affichage/de page incorrecte dans le navigateur Facebook intégré dans iOS 9.x

Lors de l'ouverture de l'application demo de core-layout avec le navigateur intégré de l'application Facebook sur iOS 9.x (au moins), l'élément de pied de page n'est pas visible lorsque l'appareil est en mode portrait. Si vous faites pivoter l'appareil en mode paysage, le pied de page sera partiellement visible. Cependant, le pied de page (avec un bouton) doit être complètement visible.

La première image montre comment l’application de démonstration devrait est, tandis que la deuxième montre comment l’application de démonstration manque le pied de page lorsqu’il est visualisé avec la vue Web intégrée de l’application Facebook (les images ont été saisies à partir d’un navigateur comment le bogue est manifesté):

 How the demo _should_ look.  Demo with missing footer.

Après avoir testé beaucoup d'hypothèses différentes, nous avons conclu que le problème était que le navigateur rendait la page/fenêtre d'affichage plus haute que la zone visible.

Ce bogue semblait lié à Problèmes liés à la fenêtre d’affichage de Safari pour iOS9, la méta ne s’adaptait-elle pas correctement? et La page Web n'obtient pas une hauteur de 100% dans l'application Twitter sur iOS 8 .

htmlioscssfacebookembedded-browser
12
Martin Thorsen Ranang

La solution que nous avons trouvée était une combinaisondes autres réponses trouvées sur StackOverflow, tout en portant une grande attention aux détails. Je soulignerai que la mise en œuvre de quelquesdes modifications ci-dessous n'a pas eu lieu pascorrection) le bug; allles modifications ont dû être faites.

  • Le code CSS définissant la hauteur de l'élément div d'habillage (#outer-wrap) devait être modifié de

    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;
}

  • La fonction suivante a été ajoutée à la bibliothèque et est appelée à l'initialisation:

    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();

  • La méta-tag viewport devait être

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

    Cependant, les valeurs d'échelle devaient être 1.0, not1; le correctif a donc été interrompu dans l'un de nos processus de construction où nous avons appliqué html-minifier , qui a remplacé les valeurs décimales par des entiers. Le problème html-minifier a été résolu en entourant la balise méta viewport avec des commentaires <!-- htmlmin:ignore -->.

10
Martin Thorsen Ranang

Avait le même problème, mais tout ce que j'avais à faire était d'utiliser window.innerHeight, au lieu de document.body.clientHeight.

1
Craigo

Pour ceux qui recherchent une alternative à la réponse de Martin, vous pouvez également mettre à jour votre CSS lorsque vous détectez le navigateur intégré à Facebook .

Mon problème était essentiellement lié à CSS: les éléments du bas étaient cachés.

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

Et alors :

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