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?

http://stackoverflow.com/questions/12198040/iphone-web-app-is-under-status-bar In this question it shows that the status bar either a) pushes the content down if it's declared black or default b) overlaps when it is declared translucent. In my case I declare my status bar translucent, which causes the overlap. So far I understand this issue, but what I don't understand is why my javascript CSS is not working. — Prastow, Apr 28 '14 at 10:04
How should I control the ipad apps status bar height? I mean the status bar as the light grey bar which has the "ipad with wifi signal, time, bluetooth, battery level and also the navigational tabs"-> in this pic-> [https://www.service2media.com/wp-content/uploads/2014/03/VakantieVeilingen_EditorsChoice.png — Neocortex, May 26 '15 at 16:51

score 2 · Accepted Answer · answered Apr 28 '14 at 17:18

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).

iOS web app status bar height

1 Answers1