Mobile Safari Viewport - Preventing Horizontal Scrolling?

Question

I\'m trying to configure a viewport for mobile Safari. Using the viewport meta tag, I am trying to ensure that there\'s no zooming, and that you can\'t scroll the view horiz

Answer 1

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.

Answer 2

Try this variants

html, body{ overflow-x: hidden; }

Answer 3

Don't know whether its just me or whether some of the code posted has been incorrectly typed, but:

should this

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

not read like this

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

so content is only listed once with out " as it has no closing " at the end of the code.....

Answer 4

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.

Answer 5

body div {overflow: hidden ;} @ media queries

. This wil prevent any elemente pushing content out.

Answer 6

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