web-dev-qa-db-fra.com

désactiver le défilement horizontal sur le Web mobile

J'ai un problème où des parchemins horizontaux apparaissent sur certains téléphones de mon site. J'ai essayé de mettre overflow-x: hidden mais cela ne fonctionne pas. La largeur est automatique, de sorte qu'elle redimensionnera automatiquement le Web 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.

Aucun conseil? Merci!

cssmobile-website
48
Sylph

Afin de régler la largeur sur la largeur de l'appareil, utilisez ce qui suit:

<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
65
jrosell

Ajoutez simplement ce CSS:

html, body {
  overflow-x: hidden;
}
body {
  position: relative
}
29
pollux1er

J'ai trouvé cette réponse ici sur stackoverflow qui fonctionne parfaitement pour moi:

utilisez-le avec 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 au cas où votre corps aurait un rembourrage (pour empêcher l'appareil de s'adapter à la zone de contenu du corps, et donc d'ajouter toujours 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;
}
23
Klaas van der Weij

Pour moi, la balise META de la fenêtre d'affichage a provoqué un problème de défilement horizontal sur le Blackberry.

J'ai enlevé content="initial-scale=1.0; maximum-scale=1.0; à partir de la balise viewport et il a résolu le problème. Voici ma balise de fenêtre actuelle:

<meta name="viewport" content="user-scalable=0;"/>
6
James Lawruk

Je sais que c'est une vieille question, mais il convient de noter que BlackBerry ne prend pas en charge overflow-x ou overflow-y.

Voir mon article ici

2
samael

J'utilise ceci pour que l'utilisateur puisse toujours zoomer et dézoomer:

<meta name="viewport" content="width=device-width;" />
2
michaelsp

Cela fonctionne pour moi sur 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">

1
Ron Royston