0

I am trying to make my mobile website in to a webapp.

I configured the webapp settings:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no">

Overmore, I am using Bootstrap and have a navigation fixed at the top, so it scrolls with the user on mobile. I added a padding-top: 20px; to this navigation bar.

If I then open the website, that works. But saving it as a webapp uses the correct status bar, but the top padding has disappeared.

I found this question where some answers go into the problems currently on iOS 8.1 / 8.2. But I did not found an answer to my problem.

Does anyone have an idea how this is caused and can be fixed? Thank you!

Community
  • 1
  • 1
B_s
  • 3,026
  • 5
  • 32
  • 51

1 Answers1

0

I had the same issue and ended up injecting the margins via jQuery. e.g.

$("#my-div").css('margin-top', '60px');

Also, when my changes to the viewport meta tags weren't showing up I deleted the webapp icon and then went to the site and placed it again with a different name; my changes showed up and it refreshed normally from there.

Hope that helps.

Steven McElveen
  • 429
  • 5
  • 6