title: disabling horizontal scroll on an iPhone website
body: <p>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 <code>&lt;style&gt;</code> tags in the <code>&lt;head&gt;</code> but that didn't help:</p>
  
  <blockquote>
    <p>body { overflow-x: hidden; }</p>
  </blockquote>
  
  <p>I have put the following <code>&lt;meta&gt;</code> 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.</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
  </code></pre>
  
  <p>I am currently using an iPhone 4 to check the website and the website can be accessed by going to this link: <a href="http://ignoremusic.com" rel="noreferrer">http://ignoremusic.com</a>. Looking forward to a solution from you guys, thanks.</p>
  
  <blockquote>
    <p><strong>SOLUTION:</strong> 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.</p>
  </blockquote>