隱藏100％身高的iPhone地址欄

Question

很多帖子都是這樣的，但並不完全適合我的情況。我的頁面的靈活尺寸設置爲100％寬度和100％高度，因此典型的加載滾動功能不起作用。任何想法或其他解決方案？

謝謝！

CSS：

* { 
    margin:0; 
    padding:0; 
} 
html, body { 
    width:100%; 
    height:100%; 
    min-width:960px; 
    overflow:hidden; 
} 

的Javascript：

/mobile/i.test(navigator.userAgent) && !pageYOffset && !location.hash && setTimeout(function() { 
    window.scrollTo(0, 1); 
    }, 1000);​ 

Answer 1

我這個掙扎過。最初我嘗試了一個CSS類（.stretch），它定義了200％的可見高度和溢出，然後在scrollTo之前和之後通過腳本在HTML上進行切換。這是行不通的，因爲計算的100％高度指的是可用的視口尺寸減去所有瀏覽器鑲邊（將狀態欄重新放回原位）。

最終，我不得不請求特定的樣式通過DOM API動態應用。要添加到您的額外片段：

var CSS = document.documentElement.style; 

/mobile/i.test(navigator.userAgent) && !pageYOffset && !location.hash && setTimeout(function() { 
    CSS.height = '200%'; 
    CSS.overflow = 'visible'; 

    window.scrollTo(0, 1); 

    CSS.height = window.innerHeight + 'px'; 
    CSS.overflow = 'hidden'; 
}, 1000);​ 

不過，我會建議延長斯科特Jehl的方法，其中涉及未成年人的Android/iOS的Safari瀏覽器scrollTo差異：

https://gist.github.com/1183357

Answer 2

這從內特 - 史密斯解決方案幫助我：How to Hide the Address Bar in a Full Screen Iphone or Android Web App。

這裏是至關重要的一點：

var page = document.getElementById('page'), 
    ua  = navigator.userAgent, 
    iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'); 

var setupScroll = window.onload = function() { 
    // Start out by adding the height of the location bar to the width, so that 
    // we can scroll past it 
    if (ios) { 
    // iOS reliably returns the innerWindow size for documentElement.clientHeight 
    // but window.innerHeight is sometimes the wrong value after rotating 
    // the orientation 
    var height = document.documentElement.clientHeight; 
    // Only add extra padding to the height on iphone/ipod, since the ipad 
    // browser doesn't scroll off the location bar. 
    if (iphone && !fullscreen) height += 60; 
    page.style.height = height + 'px'; 
    } 
    // Scroll after a timeout, since iOS will scroll to the top of the page 
    // after it fires the onload event 
    setTimeout(scrollTo, 0, 0, 1); 
}; 

有關詳細信息，請查看他的blog post或Gist。