web-dev-qa-db-fra.com

Mobile Safari Viewport - Empêcher le défilement horizontal?

J'essaie de configurer une fenêtre pour Safari mobile. En utilisant la balise META viewport, j'essaye de m'assurer qu'il n'y a pas de zoom et que vous ne pouvez pas faire défiler la vue horizontalement. Voici la balise META que j'utilise:

<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Sur mon iPhone lorsque je charge la page, cela semble correct:

screenshot

Mais je peux faire défiler horizontalement, pour que ça ressemble à ceci (c'est aussi loin que possible à droite:

screenshot

Lorsque je le fais basculer en mode paysage, la page s'affiche comme prévu, verrouillant la position de défilement horizontal.

J'essaie de comprendre comment faire en sorte que cette page ne défile pas du tout horizontalement. Est-il possible que j'ai un élément de page poussant le contenu? Je ne m'attendrais même pas à ce que ce soit possible avec un ensemble de fenêtres correct, mais je saisis les pailles ici.

mobilemobile-safariviewport
24
Aaron Vegh

Est-il possible que j'ai un élément de page poussant le contenu?

Oui, c'est bien le cas. Le paramètre de fenêtre définit uniquement la zone de fenêtre visible, mais ne traite pas de la désactivation du panoramique latéral.

Donc, pour éviter que cela ne se produise, définissez un débordement: caché sur l'élément qui contient votre contenu, ou bien, évitez les éléments de déborder.

NB: d'autres navigateurs mobiles prennent également en charge la balise META Viewport depuis un certain temps, vous voudrez donc également les tester.

20
andreasbovens

body { overflow-x: hidden; } fonctionne également.

14
HaL

Tard dans la fête ici, mais j'ai juste eu un problème similaire où j'avais un défilement horizontal sur un iPhone 5, le site montrait effectivement le double de la largeur, avec la moitié droite complètement vide.

En fait, j'avais juste besoin de changer la balise META de la fenêtre d'affichage de:

<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0' />

à:

<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />

L'ajout de l '"échelle initiale" l'a verrouillé afin qu'il ne défile que verticalement comme prévu.

10
Codecraft

body div {overflow: hidden;} @ requêtes multimédias

. Cela empêchera tout élément de pousser du contenu.

6
Jose Miguel

Je ne sais pas si c'est juste moi ou si une partie du code affiché a été mal tapé, mais:

cela devrait-il

<meta name='viewport' content='content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />

pas lu comme ça

<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />

donc le contenu n'est répertorié qu'une seule fois sans "comme il n'a pas de fermeture" à la fin du code .....

4
Venomage

Essayez ces variantes

html, body{ overflow-x: hidden; }

3
ibeseda