iOS 网络应用程序状态栏高度

Question

我已经使用这种方法制作了一个带有透明状态栏的网络应用程序:

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

效果很好，但是，状态栏的文本与我的内容重叠。我正在使用 Bootstrap 模板，我尝试将导航向下推 15 像素，这样电池指示器等就不会与我的导航栏重叠。

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

如果在 javascript 文档中使用此 javascript.ready 它正在工作，导航将向下推 15px。但是在安装 webapp 之后，我的导航栏没有任何变化。我的 javascript 是不是放错地方了？

Answer 1

我能够自己修复它。

问题可能出在 javascript 的位置。现在我在

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

在文件末尾(在页脚中)

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

而且它的工作方式和它应该的一样。我的容器被向下推了 15px，看起来就像一个普通的应用程序。没有动画或效果(例如，我没有看到容器被推下)。