讓 Mobile Safari 隱藏網址列

了讓 iPhone 瀏覽到網誌的時候,可以有比較多一點的版面空間,許多網站,都會讓iPhone Safari 載入網頁後,把網址列隱藏起來。這樣一來,整個版面高度至少就多了44個 pixel 出來。舉例來說,如你可以用 iPhone 拜訪 Google 的首頁,你就會發現,當網頁載入完成,網址列就「藏」起來了。

我本來以為,這是利用 Safari 的特殊 meta tag 來達成了,也曾誤以為是用 CSS3 來改的。我自己嘗試過上述的兩種方式,都無法達到目的,所以就在網路上爬了文,終於找到了可以用的方法了。

按照 ShaunMackey.com 上的 How to Hide the Address Bar in MobileSafari 文章說明,我們只要在<body>標籤屬性中,寫成下列的樣子,你的網頁,就會在載入後自動「藏」起網址列了。但事實上並不是「藏起來」,而是讓瀏覽器將網頁內容往上捲一點,讓網址列有被藏起來的效果。

<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">

現在,各位只要用 iPhone 來拜訪我的網站,也會有同樣的效果出現了。

Leave a Comment