手機CSS高度100％+瀏覽器chrome？

我想要一個div佔據移動設備100％的視口。最初我只是將它的高度和寬度設置爲100％。手機CSS高度100％+瀏覽器chrome？

但是現在我躲在chrome瀏覽器具有以下JavaScript：

setTimeout(function() { 
window.scrollTo(0, 1) }, 
100);

結果是，高度爲100％減去chrome瀏覽器的高度。另外，javascript的工作原理是通過向下滾動頁面來隱藏chrome，並且只有當頁面比div im使用的頁面高時纔會發生這種情況。

我該如何解決這個問題？是否使用設備檢測並在每個設備基礎上以像素爲單位添加瀏覽器鑲邊高度值的唯一方法？我想盡可能避免這種情況。謝謝

來源

2012-03-14 Evans

如果我沒有錯你的問題主要與Safari iPhone有關。

最簡單的解決方案可能是檢查每個設定間隔的頁面高度變化，並相應地更改容器的高度。根據我的經驗，沒有CSS解決方案正在工作

var prevPageHeight = 0; 

function setHeight() { 
    $('#container').height(window.innerHeight); 
    prevPageHeight = window.innerHeight; 
} 

setInterval(function() { 
    if (window.innerHeight != prevPageHeight) { 
    setHeight(); 
    } 
}, 500); 

setHeight();

此解決方案也考慮方向更改。我很確定它可以輕鬆地優化將函數綁定到orientationChange和scroll事件。

來源

2012-03-19 17:54:36 Davide

是的，我暫時關注iPhone，因爲我還沒有Android測試。您的解決方案是否考慮到只有頂級瀏覽器鉻可隱藏的事實？帶後退和前進按鈕的底部鍍鉻物不能隱藏。謝謝 – Evans 2012-03-20 10:36:47

它需要考慮地址欄和最終的開發者吧，是的。如果您將網站保存爲主屏幕應用，則底部導航欄可以隱藏起來，甚至在這種情況下它也可以工作。 – Davide 2012-03-20 10:58:30

什麼是開發者吧？我知道，如果用戶使用元標記將網站保存到主屏幕，則可以隱藏所有瀏覽器鑲邊，但我不認爲我的用戶會這樣做。 – Evans 2012-03-20 11:04:04

手機CSS高度100％+瀏覽器chrome？

回答

相關問題