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

Question

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

Demandé el 17 de Septembre, 2013: Quand la question a-t-elle été
13650 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

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

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

Même si mon <html> y <body> les balises ont une hauteur de 100 %, il semble y avoir de l'espace pour le défilement, et ce qui est bizarre, c'est que ce problème ne se pose que sur les paysages.

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

Même lorsque je règle la hauteur des deux balises sur height: 672px !important y position:absolute; bottom: 0; Vous pouvez toujours faire défiler le contenu verticalement en touchant une iframe (les publicités sont des iframes).

J'utilise la version Release Candidate d'iOS7.

Merci pour toute aide.

Demandé el 17 de Septembre, 2013 par Pedro Garcia Mota

Answer 1

4 Réponses

Answer 2

16voto

czuendorf Points 735

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

Répondu el 28 de Novembre, 2013 par czuendorf (735 Points )

Answer 3

15voto

ururk Points 158

Je pense que c'est un bug dans iOS 7 - si vous le faites pivoter en mode portrait, il définit les deux (innerHeight/outerHeight) à la même valeur. Si ce n'est pas un bug, alors le mode portrait en a un car le comportement n'est pas cohérent.

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

Répondu el 19 de Septembre, 2013 par ururk (158 Points )

Answer 4

7voto

agfa555 Points 119

Je vais combiner les réponses. Merci à 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);
}

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

A la vôtre !

Répondu el 21 de Novembre, 2013 par agfa555 (119 Points )

Answer 5

1voto

Eric Chen Points 210

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

Voici ma solution.

J'ai écouté redimensionner , défilement , changement d'orientation pour s'assurer que lorsque l'utilisateur déclenche le changement de taille de l'écran, la fonction de réinitialisation de la hauteur sera appelée.

J'ai écrit un rebondissement pour éviter les appels multiples.

Et c'est dans un fermeture y pas de dépendance (sans 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();
  }
})();

Répondu el 21 de Janvier, 2015 par Eric Chen (210 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: