Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mobile Safari Viewport - Preventing Horizontal Scrolling?

Tags:

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.

like image 874
Aaron Vegh Avatar asked Apr 04 '11 19:04

Aaron Vegh


People also ask

How do I fix the horizontal scroll on my phone?

The horizontal scrollbar issue on mobile devices can be fixed by setting overflow to hidden. You can do this by using the Elementor Section settings or by adding CSS code.

How do I stop horizontal scrolling in web design?

You can also set the overflow-x CSS property to hidden, which prevents child content from wrapping within its container but turns off sideways scrolling. Another solution is to set the width of child elements to 100%.

How do I disable horizontal scrolling?

To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML. CSS.

How do I fix the horizontal scroll bar?

The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit. If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar.


2 Answers

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.

like image 85
andreasbovens Avatar answered Sep 29 '22 11:09

andreasbovens


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

like image 20
HaL Avatar answered Sep 29 '22 12:09

HaL