html 隱藏地址欄,通過JS自動隱藏手機瀏覽器的地址欄

大家通過手機自帶瀏覽器打開百度、淘寶，在首頁加載完畢后，會自動隱藏頁面上方的地址欄，加之這些網站針對手機瀏覽器做了優化，乍看之下，還真難區分這是WEB APP還是Native App，如下左側圖片為通過safari打開淘寶網的首頁，要不是因為底下的瀏覽器工具欄，還真像Native App。實際上它是有地址的，向下拖動就會看到地址欄，如下右側圖片。

如何才能實現將瀏覽器地址欄隱藏呢？百度一下，有很多資料，很簡單，主要利用window.scrollTo()方法，將當前頁面在屏幕上向上滾動，造成地址欄超出視野范圍，如下：

window.οnlοad=function(){

setTimeout(function() {

window.scrollTo(0, 1)

}, 0);

};

但若你做一個簡單頁面，比如只有一句話，加上如上腳本，你會悲摧的發現，

地址欄就是不自動隱藏；難道window.scrollTo()方法在這個瀏覽器不生效？

但是若你網頁內容比較多，超過屏幕高度時，卻會自動隱藏地址欄；

如何解決在內容較少時，同樣隱藏地址欄呢？需在滾動之前程序動態設置一下body的高度，增加如下代碼：

if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) {

bodyTag = document.getElementsByTagName('body')[0];

bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px';

}

如下為一個頁面示例(默認隱藏地址欄)，右圖為下拉后看到地址欄的截圖：

如上截圖的完整源碼如下：

我是個網頁，但不顯示滾動條

window.οnlοad=function(){

if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) {

bodyTag = document.getElementsByTagName('body')[0];

bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px';

}

setTimeout(function() {

window.scrollTo(0, 1)

}, 0);

};

/*輸入框圓角顯示*/

input {

background:#fff; border: 1px solid #080;

padding:5px;

-webkit-border-radius:5px;

}

/* button

---------------------------------------------- */

.button {

display: inline-block;

zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */

*display: inline;

vertical-align: baseline;

margin: 0 2px;

outline: none;

cursor: pointer;

text-align: center;

text-decoration: none;

font: 14px/100% Arial, Helvetica, sans-serif;

padding: .5em 2em .55em;

text-shadow: 0 1px 1px rgba(0,0,0,.3);

-webkit-border-radius: .5em;

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);

}

/* green */

.green {

color: #e8f0de;

border: solid 1px #538312;

background: #64991e;

background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));

}

帳號：

密碼：

如上按鈕的效果，參考自：http://www.webdesignerwall.com/demo/css-buttons.html

要實現更為完整的隱藏地址欄的效果，可參考：http://menacingcloud.com/?c=iPhoneAddressBar