web-dev-qa-db-fra.com

désactivation du défilement horizontal sur un site Web iPhone

Je développe une version iPhone d'un site Web piloté par Wordpress et je me demandais s'il y avait une méthode pour désactiver le défilement horizontal lorsque le site Web est ouvert dans Safari pour iPhone. Pour l'instant, je suis à mi-chemin le développement et juste pour vérifier si je pouvais désactiver le défilement horizontal, j'ai caché tous les éléments qui dépassaient la largeur de l'écran mais je peux toujours faire défiler horizontalement vers la droite. J'ai essayé de mettre le code suivant dans le <style> balises dans le <head> mais cela n'a pas aidé:

body {overflow-x: caché; }

J'ai mis ce qui suit <meta> code dans le fichier de tête pour faire écho si l'utilisateur consulte le site Web à partir d'un iPhone, mais il ne désactive que le pincement par l'utilisateur, c'est-à-dire que vous ne pouvez pas zoomer et dézoomer en pinçant l'écran.

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

J'utilise actuellement un iPhone 4 pour vérifier le site Web et le site Web est accessible en cliquant sur ce lien: http://ignoremusic.com . Dans l'attente d'une solution de votre part, merci.

SOLUTION: Comme suggéré par @Riskbreaker, il y avait quelques éléments qui dépassaient la largeur de ~ 312px, c'est pourquoi je pouvais toujours glisser vers la gauche et après avoir ajusté la largeur de tous ces éléments, j'ai désactivé le balayage horizontal. Une chose que j'ai apprise est que masquer overflow-x n'aide pas dans le cas d'un iPhone/iPad, vous devez réduire la largeur de tous les éléments à celle de la largeur de votre écran, sinon vous pourrez toujours balayez horizontalement.

iphoneioscssmobile-safarihorizontal-scrolling
19
Fahad Hasan

Ajoutez des débordements sur votre corps comme ceci:

body    {
        font: 12px/20px "Helvetica neue", Helvetica, Arial, sans-serif;
        font-weight: normal;
        overflow: hidden;
        overflow-y: auto;
        }

Et oui, restez avec ça:

<meta name="viewport" content="width=device-width">
10
Riskbreaker

Je sais que je suis un peu en retard à la fête, mais j'avais ce même problème et je l'ai résolu en ajoutant:

body, html{
    overflow-x: hidden;
}

J'espère que cela aidera quelqu'un d'autre!

20
Austin737

J'avais le même problème avec un menu mobile positionné en dehors de la zone d'affichage. overflow-x: caché résolu dans Android, mais pas dans les iPhones. J'ai résolu en changeant la position "absolue" en position "fixe" dans le menu:

body { overflow-x: hidden; }    
nav { position: absolute; width: 300px; right: -300px; }

à:

body { overflow-x: hidden; }    
nav { position: fixed; width: 300px; right: -300px; }

J'espère que ça aide.

2
Cristiana