web-dev-qa-db-fra.com

IOS 7 - css - hauteur html - 100% = 692px

J'ai un bug bizarre sur le mode paysage de l'iPad iOS7.

Ce que j'ai pu étudier, c'est que dans iOS7 window.outerHeight est 692px et window.innerHeight 672px; tandis que dans les versions précédentes, les deux valeurs sont 672px.

Même si mon <html> et <body> les balises ont une hauteur de 100%, il semble y avoir de la place pour le défilement, et le plus étrange est que ce problème n'apparaît que sur les paysages

Vous pouvez voir de quoi je parle en visitant t.cincodias.com, par exemple, dans un iPad iOS 7, la barre de pied de page (ou parfois l'en-tête) sera coupée. Mais sur les versions précédentes d'iOS, le contenu s'affiche correctement en plein écran.

Même lorsque j'ai défini la hauteur des deux balises sur height: 672px !important et position:absolute; bottom: 0;, vous pouvez toujours faire défiler le contenu verticalement en touchant un iframe (les annonces sont des iframes).

J'utilise la version candidate de sortie d'iOS7

merci pour toute aide.

htmlcssmobile-safariios7
50
Pedro Garcia Mota

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

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

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

Je crois que c'est un bug dans iOS 7 - si vous le faites pivoter en mode portrait, il définit les deux (innerHeight/externeHeight) à la même valeur. S'il ne s'agit pas d'un bogue, le mode portrait en a un car le comportement n'est pas cohérent.

Vous pouvez détecter iOS 7/Safari mobile et utiliser window.innerHeight si iOS 7.

15
ururk

Je vais combiner les réponses. Merci a tous!

Vous pouvez faire quelque chose comme ça:

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('#yourDivID').height(window.innerHeight);
    window.scrollTo(0, 0);
}

Le window.scrollTo résout le problème du chevauchement de la barre en paysage lors de la rotation.

À votre santé!

7
agfa555

Je reproduis le même problème dans iOS 8.

Voici ma solution.

J'ai écouté redimensionner, faire défiler, orientationChange événement, pour s'assurer que lorsque l'utilisateur déclenche un changement de taille d'écran, appellera la fonction de réinitialisation de la hauteur.

J'ai écrit un debounce pour empêcher les appels multiples.

Et c'est dans un fermeture et pas de dépendance (pas de jQuery).

(function(){
  var setViewportHeight = (function(){
    function debounced(){
      document.documentElement.style.height = window.innerHeight + "px";
      if (document.body.scrollTop !== 0) {
          window.scrollTo(0, 0);
      }
    }
    var cancelable = null;

    return function(){
      cancelable && clearTimeout(cancelable);
      cancelable = setTimeout(debounced, 100);
    };
  })();

  //ipad safari
  if(/iPad/.test(navigator.platform) && /Safari/i.test(navigator.userAgent)){  
    window.addEventListener("resize", setViewportHeight, false);
    window.addEventListener("scroll", setViewportHeight, false);
    window.addEventListener("orientationchange", setViewportHeight, false);
    setViewportHeight();
  }
})();
1
Eric Chen