I was having a horizontal scroll bar on iPhone (4) when using the base theme or a subtheme of it.

I fixed it by changing the original bootstrap theme meta tag into :

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

Hope that helps

Laurent

Comments

That's part of it. I've ran into this issue quite a bit and it can be several factors:

http://stackoverflow.com/questions/5543495/mobile-safari-viewport-preven...

Also, there exists a webkit bug where you would have to provide position: relative; on the <body/> tag: http://www.tonylea.com/2010/safari-overflow-hidden-problem/

I wouldn't mind putting in the min and max scales, but user-scalable I'm a little hesitant on. People love to pinch and zoom a website for easier reading, myself included. This part is really only if you're trying to build a web-app, not for websites.

Status:Active» Reviewed & tested by the community

Thanks Mark.

position:relative on <body> fixed the problem.

Maybe worth adding this to the default css.

Laurent

Category:task» bug
Status:Reviewed & tested by the community» Fixed

I added the relative positioning on the body on mobile widths via commit: 29fcf53.

I don't think adding the other properties in the meta tag is necessary. If you want those changed, a simple page.tpl.php override can be done.

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.