iOS web 应用状态栏高度答案

【问题标题】：iOS web app status bar heightiOS web 应用状态栏高度
【发布时间】：2014-04-27 20:49:24
【问题描述】：

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

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

这很好用，但是状态栏的文本与我的内容重叠。我正在使用引导模板，并尝试将导航向下推 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 document.ready 中使用这个 javascript，它正在工作，导航会被向下推 15px。但是在安装 webapp 之后，我的导航栏没有任何变化。我的 javascript 放错地方了吗？

【问题讨论】：

stackoverflow.com/questions/12198040/… 在这个问题中，它显示状态栏 a) 如果内容被声明为黑色，则将内容向下推或默认 b) 在声明为半透明时重叠。就我而言，我声明我的状态栏是半透明的，这会导致重叠。到目前为止，我了解这个问题，但我不明白为什么我的 javascript CSS 不起作用。
我应该如何控制ipad应用程序状态栏的高度？我的意思是状态栏为浅灰色栏，其中有“带有wifi信号、时间、蓝牙、电池电量以及导航标签的ipad”->在这张图片中-> [service2media.com/wp-content/uploads/2014/03/…

标签： ios web-applications

【解决方案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，看起来就像一个普通的应用程序。没有动画或效果（例如，我没有看到容器被推下）。

【讨论】：