隱藏100％身高的iPhone地址欄

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

謝謝！

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);

來源

2011-03-05 technopeasant

101％會使用scrollTo嗎？ – Jess 2014-03-04 05:47:09

@Jess可能不是，但現在我們可以選擇100VH或minimal-ui – technopeasant 2014-03-04 18:29:04

我這個掙扎過。最初我嘗試了一個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

來源

2011-09-16 11:15:51 Barney

這從內特 - 史密斯解決方案幫助我：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。

來源

2012-02-27 06:55:02

變量'page'是指什麼？ – Fresheyeball 2012-03-02 18:08:20

更新了代碼片段以包含變量'page'的定義。 – 2013-03-26 17:17:54

博客條目的鏈接已死亡。此外，iOS還有其他瀏覽器（最顯着的是：chrome），它們沒有相同的標題行爲，因此「isSafari」檢查可能派上用場。 – 2013-06-24 06:17:49

隱藏100％身高的iPhone地址欄

回答

相關問題