web-dev-qa-db-fra.com

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

Je crée un site Web réactif et je viens d’observer un comportement étrange dans mes pages de contenu lorsqu’elles sont affichées sur l’iPhone. Il est mis à l'échelle correctement lorsqu'il est chargé en mode portrait et lorsqu'il est basculé en mode paysage. Cependant, lorsque vous revenez en mode portrait, la page semble se décaler ou ne pas zoomer correctement, et une bande d’espace blanc se trouve en bas à droite. Cet espace blanc semble également être présent lors du premier chargement en mode portrait, l'utilisateur pouvant glisser la page à gauche 

Plutôt que de compliquer davantage l'explication, voici un lien vers une page d'échantillon où ce problème se produit . Jetez un coup d’œil sur un iPhone, puis jetez un coup d’œil à la page d’accueil qui ne présente pas ce problème .

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

iphoneorientationwhitespacerotationresponsive-design
34
ellawson

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, j’avais besoin d’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.

47
ellawson

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

html, body { width:100%;  overflow:hidden; }
43
Eva Marie Rasmussen

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 fait également la même chose, mais n'est pas une méthode préférée.

10
Navneet Kumar

Utiliser "overflow-x: hidden" résout une partie du problème, mais visse le parchemin, agissant avec des comportements étranges (comme l'a dit Jason).

Parfois, le plus difficile est de découvrir ce qui cause le problème. Dans mon cas, après quelques heures, si le problème venait de Bootstrap de Twitter:

Si vous utilisez le Bootstrap de Twitter avec des zones de "groupe de contrôle" pour vos formulaires, le problème peut être là. Dans mon cas, j'ai résolu le problème avec:

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

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

4
Miguel M. Almeida

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 bug dans Safari Mobile qui perturbait l’échelle lorsqu’on passait d’un port à l’autre.

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

J'utilise Bootstrap 3.3. J'ai essayé toutes ces solutions et rien n'a fonctionné. Ensuite, j'ai changé mon <div class = "conteneur" > en <div class = "conteneur-fluide" > dans la section avec laquelle j'avais des problèmes. Cela a résolu le problème.

0
Joe Rigney

Je sais que cela fait longtemps que ce sujet n'a pas été ouvert, mais je suis tombé sur une situation similaire et j'ai découvert que c'était parce que j'avais un élément avec les propriétés suivantes: right: -999999px; position: absolute; masqué hors de l'écran.

Changer ce qui précède en left: -999999px; position: absolute; a résolu le même problème que l’opérateur (écran blanc à droite et possibilité de glisser à droite).

0
fidev

J'ai essayé tout ce qui a été suggéré ici, rien ne fonctionne. Ensuite, je me suis aperçu que cela se connectait avec l'échelle de la page. Alors j'ai ajouté <meta name="viewport" content="width=device-width, initial-scale=1.0"> à header.php dans le dossier de mon thème principal et le problème est résolu.

0
NikLanf

Correction! .___. A un problème similaire. Fixé en définissant la largeur à une largeur de périphérique actuelle.

body, html {
  max-width: 100vw;
  margin: 0 auto;
  overflow-x: hidden;

}

0
Eimantas Šiaudinis

J'aimerais ajouter à la solution de Navneet Kumar parce que cela a fonctionné pour moi. Toute balise div ayant pour style width = 100% ne peut pas également comporter de remplissage à gauche ou à droite. Les navigateurs mobiles (j'ai remarqué le problème sur les appareils iPhone et Android) interprètent la div comme ayant une largeur supérieure à 100%, créant ainsi un espace supplémentaire à droite. (Je le savais en ce qui concerne les largeurs fixes, mais pas les largeurs en pourcentage.) Utilisez plutôt width = auto en conjonction avec le remplissage. 

0
JohnH

On dirait que les résultats varient selon les circonstances mais sur l’ensemble du site

html, body {width: 100%; x-overflow: caché; }

semble avoir travaillé pour moi!

0
leebotton