iOS web app status bar height

Question

I have used this method to make a web app with a transparent status bar:

http://blog.flinto.com/how-to-get-black-status-bars.html

this works great, however, the text of the status bar is overlapping my content. I am using a bootstrap template, and I try to push the navigation down with 15px so the battery indicator etc. is not overlapping my navigation bar.

    <script type="text/javascript">
var $l = jQuery.noConflict(); 
    if (window.navigator.standalone) {
      $l("meta[name='apple-mobile-web-app-status-bar-style']").remove();
      $l('#in_web_clips').show();
      $l('#t3-mainnav').css('padding-top','+=15px');
      $l('.menutitel').css('top','+=15px'); 
    }
    else {
      $l('#in_safari').show();
    }
</script>

If is use this javascript in javascript document.ready it is working, the navigation is pushed down 15px. But after the webapp is installed nothing changes to my navigation bar. Is my javascript in the wrong place?

Answer 1

I was able to fix it myself.

The problem was probably the location of the javascript. Now I have in the

<script type="text/javascript">
var $l = jQuery.noConflict(); 
    if (window.navigator.standalone) {
      $l("meta[name='apple-mobile-web-app-status-bar-style']").remove();
      $l('#in_web_clips').show();
    }
    else {
      $l('#in_safari').show();

    }
</script>

and at the end of the file (in the footer)

<script type="text/javascript">
if (window.navigator.standalone) {
          $l('#t3-mainnav').css('padding-top','+=15px');
        $l('.menutitel').css('top','+=15px'); 
}
</script>

And it works like it should. My container is pushed down by 15px, and looks exactly like a regular application. There is no animation or effect (e.g. I don't see the container being pushed down).