Status Bar over ionic app on IOS7 fullscreen browser

Hello Everybody, I looked for in the forum and I didn’t find an answer. So I hope I’m not posting a duplicate issue.

I followed advices from this tutorial and to hide the Browser’s User Interface on IOS 7 I added the tag in my index.html header.

But I have the same problem explained here.

My app looks like that :

So I tried to add a margin-top to the body but the body position is absolute so the margin has not effects.

How is it possible to fix that ?

Thank you very much for your help.

If your are trying this as a web-app (saved to device home screen, but still a website) you will have this problem.

Ionic uses cordova’s device plugin to find out the device is ios and adjust the header bar.
For webapps, you won’t have access to this.

Ok, I fixed it by adding this script in my index.html

    document.addEventListener('DOMContentLoaded', function(){
        var updateStatusBar = navigator.userAgent.match(/iphone|ipad|ipod/i) && navigator.appVersion.match(/OS (\d)/) && parseInt(navigator.appVersion.match(/OS (\d)/)[1], 10) >= 7 && window.navigator.standalone;

        if (updateStatusBar) {
1 Like