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

markhalliwell’s picture

markhalliwell
Primary language English
commented

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.

agence web coheractio’s picture

agence web coheractio commented
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

markhalliwell’s picture

markhalliwell
Primary language English
commented
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.

iamfredrik’s picture

iamfredrik commented
Issue summary: View changes

FYI: the sticky footer template from http://getbootstrap.com/examples/sticky-footer/ does not work with position: relative on the body.

adigunsherif’s picture

adigunsherif commented

#5 is very correct. If position:relative is removed, that's only when the sticker footer would work.