Status Bar over ionic app on IOS7 fullscreen browser

ionic-v1
1

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.

2

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.

3

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) {
            document.body.classList.add('platform-ios');
            document.body.classList.add('platform-cordova');
        }
    });
1 Like