web-dev-qa-db-ja.com

モバイルデバイスのブラウザーでアドレスバーを非表示にする

これを行う1つの方法を知っています。

<body onload="setTimeout(function() {window.scrollTo(0, 1)}, 100)">
...
</body>

しかし、これはページがスクロールできるほど大きい場合にのみ機能します。ページが画面に収まる場合、上記の機能は動作しません。この場合、アドレスバーを非表示にする方法は？ iphone、ipad、Androidデバイスで動作するようにする必要があります。

htmlcssmobile-safarimobile-website
25
Prabhat

たぶん、体の最小高さを大きく設定することができます。 480px垂直モードでの画面の高さ+ 60pxアドレスバーの高さ= 540px。

例：

body { min-height:540px; }     
body[orient="portrait"] { min-height:540px; }
body[orient="landscape"] { min-height:400px; }
18
Tom Claus

iPhone：

モバイル「アプリ」がホーム画面に追加された場合にのみ機能します（プラスアイコン->ホーム画面に追加）

<meta name="Apple-mobile-web-app-capable" content="yes" />

他のモバイルOSの経験はありませんが、ブラウザのURLバーを隠すAndroidをすばやくGoogle検索すると、 window.scrollTo。

16
sanderd

from http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/ 見つけました

function hideAddressBar() {
  if(!window.location.hash) {
    if(document.height < window.outerHeight)
      document.body.style.height = (window.outerHeight + 50) + 'px';
    setTimeout( function(){ 
        window.scrollTo(0, 1); 
        document.body.style.height = 'auto'; 
      }, 50 );
  }
}

少し変更された

一部のブラウザでは非常にうまく動作しますが、少なくとも動作させることはできませんAndroid Chrome。

1
petter