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 <style> tags in the <head> but that didn't help:
body { overflow-x: hidden; }
I have put the following <meta> 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.
Answer
I know I am a little late to the party, but I was having this same issue and solved it by adding:
body, html{
overflow-x: hidden;
}
Hopefully this will help someone else!