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:

screenshot

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

screenshot

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.

score 21 · Accepted Answer · answered Apr 07 '11 at 22:37

21

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.

answered Apr 07 '11 at 22:37

andreasbovens

1,447
12
11

Figures it'd be something that simple. Still not sure what was pushing it out, but using the overflow property on the main display element fixed the issue. Thanks! – Aaron Vegh Apr 21 '11 at 17:50
Thanks for this answer. FWIW, for me, it was a hard coded `______` for comments that caused it to be too wide. – Danger14 Mar 04 '13 at 22:45
what does NB stand for – Kevin Wheeler Jul 20 '15 at 00:41
NB is Latin for Nota bene which basically implies that what follows is an additional bit of good or useful information – user2840467 Aug 03 '15 at 16:55

score 15 · Answer 2 · answered Feb 09 '12 at 23:06

15

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

answered Feb 09 '12 at 23:06

HaL

299
4
6

This doesn't appear to work on Android devices. I have a page with `overflow-x` set to hidden and can still scroll with my mouse. – Jordan Reiter Jun 19 '12 at 16:45
6

The question was for Mobile Safari :) For Android browsers, I've had success with [this answer](http://stackoverflow.com/a/10739042/326073). – HaL Jun 20 '12 at 19:05
this also breaks vertical scrolling, making scrolling really slow – Acosta Nov 14 '16 at 14:19
This works! I had no overflowing blocks or tags. I narrowed it down to just a `` with a lot of text, but it was wrapping fine! Still it would scroll horizontal and reveal dead white space. – Chloe Jun 08 '18 at 21:51

score 9 · Answer 3 · edited Dec 22 '16 at 03:04

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.

score 6 · Answer 4 · edited Aug 13 '22 at 11:53

6

This will prevent any elements pushing content out:

body div {overflow: hidden ;}  @ media queries

edited Aug 13 '22 at 11:53

Cody Gray - on strike

239,200
50
490
574

answered Jun 25 '13 at 16:54

Jose Miguel

61
1
1

I used `body > div {overflow: hidden; }` to prevent unwanted cropping – Leftium Feb 16 '15 at 08:41

score 4 · Answer 5 · edited Aug 13 '22 at 11:53

4

Try this variant:

html, body{
  overflow-x: hidden;
}

edited Aug 13 '22 at 11:53

Cody Gray - on strike

239,200
50
490
574

answered Jan 02 '19 at 16:31

Serj

41
1

Mobile Safari Viewport - Preventing Horizontal Scrolling?

5 Answers5

Linked