2011-05-02 177 views
25

我知道1種方法。在移動設備瀏覽器中隱藏地址欄

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

但是,只有當頁面足夠大才能滾動時,它纔有效。如果頁面適合屏幕上述功能將無法正常工作。在這種情況下如何隱藏地址欄?我需要得到它與iPhone,iPad,Android設備。

+2

此代碼隱藏地址欄的瀏覽器是什麼? – 2011-05-02 10:18:17

+0

在iphone和android等移動設備中,地址欄佔用大量空間,我們可以將其用於頁面。 – Prabhat 2011-05-02 10:20:02

+0

@Pekka - 移動Safari(儘管我認爲它可能無法在最新版本中運行) – Quentin 2011-05-02 11:16:47

回答

16

也許你可以將身體的高度設置得更大。 480px垂直模式下的屏幕高度+ 60px地址欄高度= 540px。

例子:

body { min-height:540px; }  
body[orient="portrait"] { min-height:540px; } 
body[orient="landscape"] { min-height:400px; } 
+0

這是一個好主意。但設置最小高度可能是一個問題。因爲我也是從iPad訪問頁面的。如果我將最小高度設置爲比iPad高度多一點,那麼我們將爲iPhone設置一個大滾動視圖。 – Prabhat 2011-05-02 11:39:00

+0

我不確定,但我認爲無法隱藏iPad上的地址欄。所以你可以將它設置爲iPhone最小高度。 – 2011-05-02 18:19:38

+3

這實際上有所幫助。我目前通過獲取屏幕的視口高度並添加60px來設置最小高度。 – Prabhat 2011-05-06 03:16:55

16

iPhone:

作品只有在移動「應用」添加到主屏幕(通過加圖標 - >添加到主屏幕)

<meta name="apple-mobile-web-app-capable" content="yes" /> 

我與其他沒有經驗移動操作系統,但一個快速的谷歌搜索隱藏瀏覽器的網址欄android導致了一個類似的解決方案,你的,與window.scrollTo。

+0

其實我的是web應用程序。所以我懷疑這會起作用。 – Prabhat 2011-05-02 11:09:21

+0

事實上,如果你只是想讓人們去你的應用程序的網址,並立即使用它,絕對不是解決方案。 – sanderd 2011-05-02 11:30:35

1

我發現

function hideAddressBar() { 
    if(!window.location.hash) { 
    if(document.height < window.outerHeight) 
     document.body.style.height = (window.outerHeight + 50) + 'px'; 
    setTimeout(function(){ 
     window.scrollTo(0, 1); 
     document.body.style.height = 'auto'; 
     }, 50); 
    } 
} 

有點修改

作品相當不錯在某些瀏覽器,但至少我無法得到它的工作的Android鉻。