IP Girl
  1. IP Girl
  3. IOS 7 – css – hauteur html – 100% = 692px
Intereting Posts
Obtenir le suffixe de jour lors de l’utilisation de DateTime.ToSsortingng () Comment utiliser WPF Background Worker Des thèmes WPF gratuits? Définir le temps de conception DataContext sur une fenêtre donne une erreur de compilation? Afficher l’intégralité du bloc de données lorsqu’il est enveloppé dans tbl_df? Appliquer le style CSS sur tous les éléments sauf avec un ID SPECIFIQUE Comment puis-je trouver la structure de données qui représente la disposition de la mine du démineur en mémoire? Que représente un point d’interrogation dans les requêtes SQL? Authentification sociale ASP.NET Web API pour Web et Mobile Django: Assigner des variables dans un modèle affiche uniquement le premier caractère de l’option sélectionnée Format de réponse de l’API JSON standard? Quel est le meilleur moyen de déclencher un événement onchange dans react js Existe-t-il une méthode standard Java «à la fois nulle ou égale»? Surefire ne reprend pas les tests Junit 5

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

J’ai un bug bizarre sur le mode iPad iOS7.

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

Même si mes balises et ont une hauteur de 100%, il semble y avoir de la place pour le défilement, et ce qui est étrange, c’est que ce problème ne se manifeste que sur landscpae.

Vous pouvez voir de quoi je parle en visitant le site t.cincodias.com, par exemple, sur un iPad iOS 7, la barre de pied 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 quand je règle la hauteur des deux tags à la height: 672px !important et position:absolute; bottom: 0; position:absolute; bottom: 0; , vous pouvez toujours faire défiler le contenu verticalement en touchant un iframe (les annonces sont des iframes).

Je lance la version candidate d’iOS7

Merci pour toute aide.

Je crois que c’est un bogue dans iOS 7 – si vous le faites pivoter en mode portrait, il définit les deux (innerHeight / outerHeight) sur 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 pouvez détecter iOS 7 / Safari mobile et utiliser window.innerHeight si iOS 7.

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

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

Window.scrollTo résout le problème de chevauchement de la barre dans le paysage lors de la rotation.

À votre santé!

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

Voici ma solution

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

J’ai écrit un compte rendu pour empêcher les appels multiples.

Et c’est dans une 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(); } })();