隱藏iPhone瀏覽器上的Address Bar

2010-09-02

5844
0
Mobile

設計iPhone程式是大家很希望從中可以獲利的機會，設計Mobile Web其實也是另一個市場，

因為設計出來的Mobile Web其實可以較製作Application來的更易跨不同的手持裝置，不管你

是Windows Mobile(Phone)、iPhone、Android、Symbain S60或Opera Mobile，他們支援Web的

標準都較傳統一些比較低階手機只有支援WAP來的更高，也讓我們可以使用標準的XHTML

、jQuery(或JavaScript)、CSS 2(部分CSS 3)就可以讓用戶感受相同的使用的經驗。

然而，隨著不斷地新的手持系統版本推出更新之後呢，其實支援的標準也就愈來愈接近一

般桌上型瀏覽器的程度，當然我指的是不包括其他支援Plug-in的其他第三方程式。這樣的

情形也會影響我們設計過程裡要去考慮使用的技術，所以其實Mobile Web的開發其實是充

滿著很多的挑戰的。

接下來要談論的是此篇的內容，其實主要強調的點在於，由於iPhone的瀏覽器：Safari Mobile。

它不像Opera Mobile、Android或是IE Mobile會自動在網頁讀取完成後，把Address Bar給隱藏起來，

但其實這樣的說法有點不太對，其實iPhone還是會幫你把Address Bar收起來，但是前提是你目前

瀏覽網頁的內容不是在整個頁面的最Top。但這樣對於如果設計希望把Address Bar給隱藏起來，

提供更多內容於一個視窗大小可以顯示時，其實就會有點不方便了。

因此，我參考了在Refences中所提及的二篇內容，其實他的做法都是類似上述所提到的：

將瀏覽畫面移動到不是整個網頁內容的最Top。這樣就可以讓Address Bar好像被隱藏起來一樣。

但必需要強調的是這樣的顯示結果，跟其他瀏覽器所提供的功能還是有所差異的。

以下是程式碼：

        1: <script type="text/javascript">

       2:   addEventListener('load', function() {

       3:     var tUserAgent = navigator.userAgent;

       4:     if (tUserAgent.indexOf("iPhone") != -1) {

       5:         setTimeout(HideUrlBar(), 100);

       6:     }

       7:   }        

       8:     

       9:   function HideUrlBar() {

      10:     window.scrollTo(0, 1);    

      11:   }

      12: </script>