iOS網絡應用狀態欄高度

Question

我使用這種方法制作一個透明狀態欄的網絡應用程序：

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

這很好用，但狀態欄的文本與我的內容重疊。 我正在使用自舉模板，我嘗試用15px向下推導航，因此電池指示燈等不會與我的導航欄重疊。

    <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，看起來就像一個普通的應用程序。 沒有動畫或效果（例如，我沒有看到容器被按下）。