Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.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
Comment #1
markhalliwellThat'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-scalableI'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.Comment #2
Agence Web CoherActio CreditAttribution: Agence Web CoherActio commentedThanks Mark.
position:relativeon<body>fixed the problem.Maybe worth adding this to the default css.
Laurent
Comment #3
markhalliwellI 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.phpoverride can be done.Comment #5
iamfredrik CreditAttribution: iamfredrik commentedFYI: the sticky footer template from http://getbootstrap.com/examples/sticky-footer/ does not work with position: relative on the body.
Comment #6
adigunsherif CreditAttribution: adigunsherif as a volunteer commented#5 is very correct. If position:relative is removed, that's only when the sticker footer would work.