JS_javascriptスキルを使用してモバイルブラウザのアドレスバーを自動的に非表示にする実装原理とコード-jsチュートリアル-php.cn

誰もが携帯電話に付属のブラウザを介して百度や淘宝網を開きます。また、これらの Web サイトは、携帯電話に付属のブラウザで自動的に非表示になります。一見すると、これは WEB アプリですか、それともネイティブアプリですか? 下の左の写真は、その下にブラウザのツールバーがなければ、実際に開いたタオバオのホームページを示しています。ネイティブアプリのように見えます。実際、それを下にドラッグすると、下の右の図に示すように、アドレスバーが表示されます。

ブラウザのアドレスバーを非表示にするにはどうすればよいですか? Baidu には多くの情報がありますが、非常にシンプルです。次のように、window.scrollTo() メソッドを使用して画面上で現在のページを上にスクロールし、アドレスバーが視野を超えます。 >

コードをコピーコードは次のとおりです。

window.onload= function(){ 
setTimeout(function() { 
window.scrollTo(0, 1) 
}, 
}; >
しかし、たとえば上記のスクリプトだけで簡単なページを作成すると、残念ながら 

 アドレス バーが自動的に非表示にならない 

ことがわかります。 window.scrollTo() メソッドはこのブラウザでは有効になりませんか? ただし、Web ページに多くのコンテンツが含まれており、画面の高さを超える場合、アドレスバーは自動的に非表示になります。 コンテンツが少ないときにアドレスバーを非表示にする方法は?スクロールする前に、プログラムは本体の高さを動的に設定する必要があります。次のコードを追加します。

コードをコピーします。

コードは次のとおりです。次のように: if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) { bodyTag = document.getElementsByTagName('body')[0]; .style.height = document.documentElement .clientWidth / screen.width * screen.height 'px';

}

以下はページの例です（アドレスバーは非表示になっています）デフォルト)。右の図は、プルダウン後のアドレス バーのスクリーンショットです: 

コードをコピー

コードは次のとおりです:

;

我是个网页，但不示滚动条

window.onload=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;ボーダー: 1px ソリッド #080;
パディング:5px;
-webkit-border-radius:5px;
}
/* ボタン
------------------------------------- --------- */
.button {
display: inline-block;
ズーム: 1; /* ズームと *display = display:inline-block の ie7 ハック */
*display: inline;
vertical-align: ベースライン;
マージン: 0 2px;
概要: なし。
カーソル: ポインタ;
text-align: 中央;
テキスト装飾: なし。
フォント: 14px/100% Arial、Helvetica、サンセリフ;
パディング: .5em 2em .55em;
テキストシャドウ: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* 緑 */
.green {
color: #e8f0de;
ボーダー: 実線 1px #538312;
背景: #64991e;
背景: -webkit-gradient(linear, 左上, 左下, from(#7db72f), to(#4e7d0e));
}

帐号：

秘密コード：