Mobile Safari Viewport - Preventing Horizontal Scrolling?

body { overflow-x: hidden; } also works.

Is it possible that I've got some page element pushing the content out?

Yes, that is indeed the case. The viewport setting only defines the visible viewport area but does not deal with turning off sideway panning.

So, in order to avoid this from happening, set an overflow:hidden on the element that contains your content, or else, avoid elements from overflowing.

NB: other mobile browsers also support the viewport meta tag since a while, so you'll want to test in those as well.

Late to the party here, but I just had a similar problem where I had horizontal scrolling across an iPhone 5, the site was effectively showing as double the width, with the right hand half completely empty.

In fact, I just needed to change the viewport meta tag from:

<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0' />

to:

<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />

Adding the 'initial-scale' locked it down so that it only scrolled vertically as expected.