désactiver le défilement horizontal sur le web mobile
j'ai un problème où des rouleaux horizontaux apparaissent sur certains téléphones pour mon site. J'ai essayé de mettre overflow-x :caché mais ça ne marche pas. La largeur est automatique, de sorte qu'il sera en fait redimensionner automatiquement le web pour convenir à la taille de l'écran. Tous les autres téléphones sont très bien sauf si vous les voyez dans blackberry, nokia e52 et Windows mobile, le défilement horizontal apparaîtra.
un conseil? Je vous remercie!
8 réponses
utiliser <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" /> pour régler la largeur sur la largeur du dispositif.
j'ai trouvé cette réponse ici sur stackoverflow qui fonctionne parfaitement pour moi:
utilisez ceci dans le style
body {
overflow-x: hidden;
width: 100%;
}
utilisez ceci dans l'étiquette de tête
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
une légère addition à moi dans le cas où votre corps a rembourrage (pour empêcher le dispositif de passer à l'échelle du contenu du corps-boîte, et donc en ajoutant encore une barre de défilement horizontale):
body {
overflow: hidden;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
overflow-x: hidden;
}
body {
position: relative
}
il suffit d'ajouter ce CSS
pour moi, la balise meta de viewport en fait a causé un problème de défilement horizontal sur le Blackberry.
j'ai supprimé content="initial-scale=1.0; maximum-scale=1.0; de l'étiquette de viewport et il a corrigé le problème. Ci-dessous se trouve ma balise viewport actuelle:
<meta name="viewport" content="user-scalable=0;"/>
Je m'en sers pour permettre à l'utilisateur de zoomer encore et encore:
<meta name="viewport" content="width=device-width;" />
cela fonctionne pour moi à travers tous les appareils mobiles en mode portrait et paysage.
<meta name="viewport" content="width=device-width, initial-scale = 0.86, maximum-scale=3.0, minimum-scale=0.86">
j'ai eu le même problème. Ajouter l'échelle maximale=1 fixe it:
: <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
nouveau: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
P. S. J'ai aussi utilisé des virgules entre les valeurs. Mais il semble que ça fonctionne avec un point-virgule.