iOS 7 iPad Safari Paysage problème de disposition innerHeight/outerHeight

Question

Nous rencontrons des problèmes avec une application web dont la hauteur est de 100 % dans Safari sous iOS 7. Il semble que la hauteur de window.innerHeight (672px) ne corresponde pas à celle de window.outerHeight (692px), mais uniquement en mode paysage. Ce qui se passe, c'est que dans une application dont la hauteur du corps est de 100 %, on obtient 20px d'espace supplémentaire. Cela signifie que lorsqu'un utilisateur passe le curseur sur notre application, les éléments de navigation sont tirés derrière le chrome du navigateur. Cela signifie également que tout élément positionné de manière absolue en bas de l'écran se retrouve décalé de 20px.

Ce problème a également été exposé dans cette question ici : IOS 7 - css - html height - 100% = 692px

Et peut être vu dans cette capture d'écran ambiguë :

Ce que nous essayons de faire, c'est de contourner ce problème pour que, jusqu'à ce qu'Apple corrige le bug, nous n'ayons pas à nous en préoccuper.

L'un des moyens d'y parvenir est de positionner le corps de manière absolue, uniquement dans iOS 7, mais cela place les 20px supplémentaires en haut de la page plutôt qu'en bas :

body {
    position: absolute;
    bottom: 0;
    height: 672px !important;
}

Toute aide pour forcer outerHeight à correspondre à innerHeight, ou pour contourner le problème afin que nos utilisateurs ne le voient pas, serait très appréciée.

Answer 1

Dans mon cas, la solution a été de changer le positionnement en fixe :

@media (orientation:landscape) {
    html.ipad.ios7 > body {
        position: fixed;
        bottom: 0;
        width:100%;
        height: 672px !important;
    }
}

J'ai également utilisé un script pour détecter les iPad avec iOS 7 :

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('html').addClass('ipad ios7');
}

Answer 2

Une solution simple et plus propre, uniquement en CSS :

html {
     height: 100%;
     position: fixed;
     width: 100%;
   }

iOS 7 semble définir la hauteur correctement avec cette méthode. De plus, il n'est pas nécessaire d'utiliser des événements javascript de redimensionnement, etc. Puisque vous travaillez avec une application pleine hauteur, il n'est pas vraiment important que la position soit toujours fixe.

Answer 3

La réponse de Samuel, comme l'a également indiqué Terry Thorsen, fonctionne très bien, mais échoue dans le cas où la page Web a été ajoutée à la maison iOS.

Une correction plus intuitive serait de vérifier si window.navigator.standalone var.

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && !window.navigator.standalone) {
    $('html').addClass('ipad ios7');
}

De cette façon, elle ne s'applique que lorsqu'elle est ouverte dans Safari, et non pas si elle est lancée depuis la maison.

Answer 4

La réponse de Samuel est la meilleure, mais elle ne fonctionne pas si un utilisateur ajoute la page à son écran d'accueil (les pages de l'écran d'accueil ne présentent pas le bogue). Vérifiez le innerHeight avant d'ajouter la classe comme ceci :

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    if(window.innerHeight==672){
        $('html').addClass('ipad ios7');
    }
}

Notez que le bogue ne se manifeste pas non plus sous webview.

Answer 5

J'ai utilisé cette solution JavaScript pour résoudre ce problème :

    if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && window.innerHeight != document.documentElement.clientHeight) {
  var fixViewportHeight = function() {
    document.documentElement.style.height = window.innerHeight + "px";
    if (document.body.scrollTop !== 0) {
      window.scrollTo(0, 0);
    }
  }.bind(this);

  window.addEventListener("scroll", fixViewportHeight, false);
  window.addEventListener("orientationchange", fixViewportHeight, false);
  fixViewportHeight();

  document.body.style.webkitTransform = "translate3d(0,0,0)";
}