Remove horizontal movement / wiggle from iPhone optimized pages

I'm trying to optimize our News pages for iPhone. One problem I've noticed is that I'm able to tap and move the page horizontally (i.e. wiggle).

My question is, how I can prevent this horizontal movement from happening?

All of our 开发者_开发技巧News pages have this problem. Here are a couple examples:

• With picture
• Without picture

Something is definitely set greater than your device width. Add the following to your css to find the culprit.

* { border-style:solid; }

You can then narrow down your search by setting border-color:red; to individual classes/tags/ids.

Add "overflow-x: hidden" on the body.

You can try setting user-scalable=0; and see if that has any effect.

This just happened to me too and it was the result of an extra closing div tag. Once I removed the extra </div>, the horizontal "wiggle" didn't happen any more.

I too, had the iPhone "wiggles" on a web page. It ended up being caused by an image that was wider than the column width it sat in (it was the last column in the row using Twitter Bootstrap). You might be thinking "obvious", but it's hard to spot when the image background matches the page background.

Just make the image responsive, or smaller than the column width - that solved it for me.

Taking the idea from other websites, most of big sites have a mobile site. look at those (the only one i know is facebook m.facebook.com) you can maybe see how the css is done. possible way of doing this is %. I would suggest to take out the sidebar for the mobile version. big pictures should be taken out or be resized so the browser doesn't have scroll bar side to side.