2014-02-11 21 views
1

我一直在閱讀Stack Overflow,並在Google上搜索可靠的方式來隱藏iOS 7上的工具欄,因爲舊的滾動技巧不再適用。使用覆蓋hack隱藏iOS 7中的工具欄

在此基礎上:http://mihhaillapushkin.wordpress.com/2014/01/20/stop-navigation-bars-from-appearing-in-iphone-ios7-safari/

我已經試過如下:

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 
     <style type="text/css"> 

      * 
      { 
       padding: 0; 
       border: 0; 
       outline: 0; 
       margin: 0; 
      } 

      html, 
      body 
      { 
       width: 100%; 
       height: 100%; 
       overflow: hidden; 
      } 

      div.content 
      { 
       position: absolute; 
       top: 0px; 
       left: 0px; 
       right: 0px; 
       bottom: 0px; 
       width: 320px; 
       height: 480px; 
       background: orange; 
      } 

      #scroller { 
       height: 100%; 
       -webkit-tap-highlight-color: rgba(0,0,0,0); 
       overflow: scroll; 
       -webkit-overflow-scrolling: touch; 
       width: 100%; 
      } 

     </style> 
    </head> 
    <body class="default"> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

     <script> 

      setInterval(function(){ 

       if((window.orientation == 90 || window.orientation == -90) && window.innerHeight != window.outerHeight) { 

        $('#scroller').show(); 

       } else { 

        $('#scroller').hide(); 

       } 

      }, 1000); 

     </script> 

     <div class="content"> 

      <div id="scroller" style="z-index: 100000;position: fixed;top:0;left:0;right:0;bottom:0;"> 
       Scroll up! 
      </div> 

     </div> 

    </body> 
</html> 

但向上滾動從來沒有真正隱藏滾動條。 #scroller隱藏和顯示工具欄是否可見,所以它的一半工作,但只是不隱藏,除非我彈出內容到工具欄,但如果我滾動然後工具欄再次出現。

我誤解了實現嗎?

回答

-1

如果你想隱藏的Safari瀏覽器的地址欄中,您需要添加此meta標籤

<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 

狀態欄可以隱藏在的iOS 7.1及以上這個元標記

<meta name="viewport" content="minimal-ui」> 
+1

嘿謝謝你的回覆,但是,前兩個只有在將主頁添加到主屏幕時才起作用,我不想依賴7.1。 – Cameron

+0

據我所知,當使網站應用程序能夠和安裝在主頁上是隱藏工具欄的唯一方法。 –

-1

好,這是作者的回答。

我還沒有潛入你的代碼塊,但只是爲了澄清我在那篇文章中講過的內容。首先,我已經展示了一個採用覆蓋的遊戲示例,該覆蓋迫使玩家向上滾動直到酒吧消失。在遊戲檢測到杆不再可見之後,它會鎖定滾動,直到玩家再次觸發導航欄,迫使他再次通過循環。

其次,我已經透露了一個伎倆,由於某種原因停用導航欄只觸發屏幕的頂部。底部仍然像往常一樣觸發它們,所以我之前提到的覆蓋層仍然是需要的。這對於這個問題來說是一個半解決方案,但它總比沒有好。

恕我直言,這兩種方法的結合爲遊戲和其他需要全屏而無需滾動的應用程序提供了一個足夠好的解決方案。