Site Web réactif sur iPhone - espace blanc indésirable en rotation du paysage au portrait

Question

Je suis entrain de créer un site web réactif, et ont juste remarqué un comportement étrange dans mes pages de contenu lors de l'affichage sur l'iPhone. Il évolue correctement lorsqu'il est chargé en mode portrait, et également lors de la rotation du paysage. Cependant, lors de la rotation arrière pour le portrait de la page semble décale vers la gauche, ou pas de zoom correctement, et il ya une bande de l'espace blanc en bas du côté droit. Cet espace blanc semble également être présent au premier chargement dans le portrait que l'utilisateur peut glisser la page de gauche

Plutôt que de compliquer l'explication plus loin, voici un lien vers un exemple de page où ce comportement se produit. Jetez un oeil sur un iPhone, alors jetez un oeil à la page d'accueil qui n'a pas ce problème.

Si vous avez besoin de voir autre chose, juste le moi savoir :)

Answer 1

Fixe le! Le problème venait d'une division en particulier - pour le trouver, il s'agissait d'un processus de suppression des différents éléments jusqu'à ce que le problème disparaisse.

Pour résoudre ce problème, je devais ajouter overflow-x: hidden à cette division et le tout est réglé! J'espère que cela sera utile à d'autres personnes ayant un problème similaire.

Answer 2

J'ai eu le même problème, je l'ai corrigé en réglant:

 html, body { width:100%;  overflow:hidden; }
 

Answer 3

Ce problème se produit lorsque la largeur d'une division est supérieure à la largeur de l'écran de l'iPAD.

Dans mon cas, certaines divisions avaient une taille de 1000 px, alors je me suis contenté de width:auto et cela fonctionne. overflow-x:hidden aussi la même chose, mais ce n'est pas une méthode préférée.

Answer 4

À l'aide de "overflow-x: hidden" résout en partie le problème, mais vis le défilement, agissant avec des comportements étranges (comme Jason dit).

Parfois, la partie la plus difficile est de découvrir ce qui est à l'origine du problème. Dans mon cas, après quelques heures, s'il est constaté que le problème était dans de Twitter Bootstrap:

Si vous êtes à l'aide de Twitter Bootstrap avec "control-group" zones pour vos formulaires, le problème pourrait être là. Dans mon cas, j'ai résolu le problème:

.control-group .controls {
     overflow-x: hidden
 }

Maintenant, l'espace blanc à droite a disparu :)

Answer 5

Je n'ai pas d'iphone pour tester cela, mais j'ai rencontré quelque chose de similaire avec les sites Web que j'ai créés par le passé. Dans mon cas, c’est parce qu’il y avait un bogue dans Safari Mobile qui perturbait l’échelle lorsqu’on passait du port à la terre.

Le code suivant l'a corrigé pour moi (je ne me souviens plus d'où je l'ai eu pour le moment)

 if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
        document.body.addEventListener('gesturestart', function() {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}