用於移除移動網絡應用程序中的地址欄的跨平臺方法

我正在使用移動Web應用程序，並試圖移除地址欄。它很容易，除非<body>的自然高度不夠高，無法滾動。嘗試我可能找不到一個可靠的iphone/android，確保<body>高度足以讓地址欄消失的跨設備方法。我見過的很多方法都依賴screen.height，這使得頁面TALLER比它需要的更多。它應該足夠高，以允許地址欄消失，而且不會更高！用於移除移動網絡應用程序中的地址欄的跨平臺方法

有沒有人有腳本來處理這個完美？我所有我需要確定頁面的高度減去iPhone和Android的地址欄。

我嘗試：允許

screen.height //too tall 
window.innerHeight //too short 
document.documentElement.clientHeight //too short 
document.body.clientHeight //almost but too short

JQUERY。

來源

2012-03-13 Fresheyeball

如果啓用jQuery的..ü可以試試$ （窗口）.height（）;或 $（document）.height（）; – 2012-04-01 17:55:26

我已經嘗試了兩個。 $（窗口）提供窗口的高度WITH地址欄。根據問題頁面的高度太短，$（文檔）提供的高度小於該高度。 – Fresheyeball 2012-04-01 19:11:15

不久前我也有類似的問題，我強調類似。這段代碼真的幫了我很大的忙：http://menacingcloud.com/?c=iPhoneAddressBar – 2012-04-01 19:34:34

This site也有一些其他的建議，但是這沒有廢話，沒有擔心的一個是提供一個github:gist和回答您的問題（粘貼在這裏爲方便起見）：

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); }, 50); 
    } 
} 

window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } }); 
window.addEventListener("orientationchange", hideAddressBar);

至於我能告訴，添加到頁面的額外高度的組合（導致您的問題）和scrollTo（）語句使地址欄消失。

，從同樣的網站上的「最簡單的解決方案，以隱藏地址欄使用scrollTo（）方法：

這將隱藏地址欄，直到用戶滾動。

This site地方超時功能中同樣的方法（該理由沒有解釋，但它聲稱的代碼不會沒有它很好地工作）：

// When ready... 
window.addEventListener("load",function() { 
    // Set a timeout... 
    setTimeout(function(){ 
    // Hide the address bar! 
    window.scrollTo(0, 1); 
    }, 0); 
});

來源

2012-04-01 19:41:48 ramblinjan

最後一個代碼塊解決了這個問題。但它用+50來解決它。在所有情況下，我們如何知道地址欄高度爲50px？ – Fresheyeball 2012-04-01 19:45:12

作爲第一個真正提供解決方案的人，你會得到滿意的結果。 – Fresheyeball 2012-04-01 19:48:37

我相信50px或多或少是任意的。 scrollTo（0,1）語句使得這個額外的數量不會簡單地創建您在設置高度過大時遇到的相同問題。就我所知，這兩者的結合使它在所有情況下都能正常工作。 – ramblinjan 2012-04-01 19:51:07

我認爲它的工作方式是當頁面不適合時隱藏地址欄。所以你想要一個頁面的高度，包括地址欄，即window.outerHeight，不是？

來源

2012-04-01 19:37:45

我正在尋找頁面的可用高度減去地址欄。否則'$（window）.height（）'會正常工作。 – Fresheyeball 2012-04-01 19:39:06

嗯，但這是如何幫助隱藏地址欄？ – 2012-04-01 19:41:09

因爲有些頁面內容很少。所以頁面自然可能只有20px高。所以滾動到頂部什麼都不做。擺脫地址欄的唯一方法是將頁面樣式設置得足夠高，以至於滾動到頂部會將其刪除。發現高度是問題。 – Fresheyeball 2012-04-01 19:47:54

用於移除移動網絡應用程序中的地址欄的跨平臺方法

回答

相關問題