Search code examples
htmlcordovastatusbar

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!

Solution

  • 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!