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 horizontally. This is the meta tag I'm using:

<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

On my iPhone when I load the page, it seems to look okay:

But I can scroll horizontally, so that it looks like this (this is as far to the right as I can go:

When I swing it into landscape view, the page renders as expected, locking the horizontal scroll position.

I'm trying to figure out how to make this page not scroll horizontally at all. Is it possible that I've got some page element pushing the content out? I wouldn't even expect that to be possible with a correct viewport set, but I'm grasping at straws here.

Solution 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.

Solution 2

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

Solution 3

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.

Solution 4

body div {overflow: hidden ;} @ media queries

. This wil prevent any elemente pushing content out.

Solution 5

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.....

View more solutions