CODEWITHSUNDEEP
htmlcordovastatusbar
Toufic Batache
Toufic Batache

Reputation: 802

Can I get the status bar height and apply it to HTML?

I am making a web app and I am using cordova / phonegap.

I have different themes in this app and I want to make the status bar color change with the theme. So I decided to make the app full screen with a fixed transparent (translucent) status bar so the color would change behind it. In the HTML, I added a small top padding:20px for the statusbar.

The problem is that the status bar is not the same size on all android devices but I set the status bar height:20px but on some devices it's not 20px!

Can I get device's status bar height and apply it to the status bar height in the HTML?

Thanks for your help and answer!

Upvotes: 2

Views: 2960

Answers (2)

Tonald Drump
Tonald Drump

Reputation: 1386

The following works albeit with a small delay:

document.addEventListener('deviceready', () => {
    var initialHeight = document.documentElement.clientHeight;
    window.addEventListener('resize', resizeFunction);
    function resizeFunction() {
        console.log('STATUS BAR HEIGHT', document.documentElement.clientHeight - initialHeight);
        window.removeEventListener('resize', resizeFunction);
    }
    StatusBar.overlaysWebView(true);
});

It takes about 150ms from deviceready, which you can "hide" by showing the SplashScreen a bit longer :)

Upvotes: 0

Toufic Batache
Toufic Batache

Reputation: 802

I found what I was looking for, I came up with using 3.90625vh for portrait and 6.94444vh for landscape. In my css I have :

@media screen and (orientation:portrait) {
      .statusbar { height: 3.90625vh; }
}
@media screen and (orientation:landscape) {
      .statusbar { height: 6.94444vh; }
}

This method works on all android devices but not on iOS!

Upvotes: 2

Related Questions