J'ai un problème avec les défilements horizontaux qui apparaissent sur certains téléphones pour mon site. J'ai essayé de mettre overflow-x: hidden mais ça ne fonctionne pas. La largeur est auto, ce qui signifie que la page Web est automatiquement redimensionnée en fonction de la taille de l'écran. Tous les autres téléphones fonctionnent bien, sauf lorsqu'ils sont affichés sur blackberry, nokia e52 et Windows mobile, le défilement horizontal apparaît.
Des conseils ?
Oui, la meilleure réponse est de le mettre dans votre requête média pour éviter le débordement sur les appareils mobiles, en plus du media viewport bien sûr.
Cela résout la plupart des principaux problèmes liés à la nouvelle réalité. Sur ma mise en page, j'étais confronté au fait que le défilement se faisait dans des positions bizarres, loin de la vue. Cela oblige maintenant le scroll x à être toujours dans le cadre. Cela ne bloque pas le zoom avant mais permet au moins d'avoir une bonne ergonomie.
J'ai trouvé cette réponse ici sur stackoverflow ce qui fonctionne parfaitement pour moi :
utiliser ceci dans le style
body {
overflow-x: hidden;
width: 100%;
}Utilisez ceci dans la balise head
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />Un léger ajout de ma part au cas où votre corps a un rembourrage (pour empêcher le dispositif de s'adapter à la boîte de contenu du corps, et donc d'ajouter une barre de défilement horizontale) :
body {
overflow-x: hidden;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Si vous créez une application et que vous l'affichez dans une vue Web, il est utile d'ajouter cet élément pour empêcher le défilement de gauche à droite. overflow-x : hidden ;
J'ajouterais qu'il faut faire des tests approfondis. Dans certains cas, l'utilisation de overflow: hidden; verrouillera votre page en haut, sans possibilité de la faire défiler vers le bas. Comme l'indique Mikeys4u, il est généralement préférable d'utiliser la fonction overflow-x: hidden; .
Pour moi, la balise méta viewport est en fait a causé un problème de défilement horizontal sur le Blackberry.
J'ai retiré content="initial-scale=1.0; maximum-scale=1.0; de la balise viewport et cela a réglé le problème. Voici ma balise viewport actuelle :
<meta name="viewport" content="user-scalable=0;"/> Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
0 votes
On dirait que l'image de la bannière fait que tout le site doit avoir un défilement horizontal pour certains téléphones. Comment faire pour que l'image de la bannière se redimensionne automatiquement ?