Fahad Hasan Fahad Hasan - 4 months ago 10x
iOS Question

disabling horizontal scroll on an iPhone website

I am developing an iPhone version of a Wordpress driven website and I was wondering if there's any method to disable horizontal scrolling when the website is open in Safari for iPhone. Right now, I am half way through the development and just to check if I could disable horizontal scrolling, I have hidden any of the elements which were exceeding the screen width but still I can scroll horizontally to the right. I tried putting the following code inside the

tags in the
but that didn't help:

body { overflow-x: hidden; }

I have put the following
code inside the head file to echo if the user is viewing the website from an iPhone but it only disables user-pinching i.e. you cannot zoom in and zoom out by pinching the screen.

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

I am currently using an iPhone 4 to check the website and the website can be accessed by going to this link: http://ignoremusic.com. Looking forward to a solution from you guys, thanks.

SOLUTION: As suggested by @Riskbreaker, there were a few elements which were exceeding the width of ~312px which is why I could still
swipe to the left and after adjusting the width of all such elements,
I disabled horizontal swipe. One thing which I learned is that hiding
overflow-x doesn't help in the case of an iPhone/iPad, you have to
reduce the width of all the elements to that of the width of your
screen otherwise you'll still be able to swipe horizontally.


Add overflows on your body like this:

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

And yes stay with this:

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