web-dev-qa-db-ja.com

ブラウザからアドレスバーを削除する（Androidで表示する）

Androidブラウザーからアドレスバーを削除して、Webアプリをよりよく表示し、ネイティブアプリのように見せることができる方法を知っている人はいますか？

javascriptandroidmobile
45
SixtySticks

次のコードでそれを行うことができます

 if(navigator.userAgent.match(/Android/i)){
    window.scrollTo(0,1);
 }

お役に立てばと思います！

45
Carlos

以下は、スクロールせずにアドレスバーを即座に削除するNON-jQueryソリューションです。また、ブラウザの向きを回転させても機能します。

function hideAddressBar(){
  if(document.documentElement.scrollHeight<window.outerHeight/window.devicePixelRatio)
    document.documentElement.style.height=(window.outerHeight/window.devicePixelRatio)+'px';
  setTimeout(window.scrollTo(1,1),0);
}
window.addEventListener("load",function(){hideAddressBar();});
window.addEventListener("orientationchange",function(){hideAddressBar();});

IPhoneでも動作するはずですが、これをテストできませんでした。

32
Tim Eckel

JQueryをロードした場合、コンテンツの高さがビューポートの高さより大きいかどうかを確認できます。そうでない場合は、その高さ（またはそれ以下）にすることができます。 AndroidエミュレーターでWVGA800モードで次のコードを実行し、Samsung Galaxy Tabで実行しました。どちらの場合もアドレスバーを非表示にしました。

$(document).ready(function() {

  if (navigator.userAgent.match(/Android/i)) {
    window.scrollTo(0,0); // reset in case prev not scrolled  
    var nPageH = $(document).height();
    var nViewH = window.outerHeight;
    if (nViewH > nPageH) {
      nViewH -= 250;
      $('BODY').css('height',nViewH + 'px');
    }
    window.scrollTo(0,1);
  }

});
14
Volomike

Volomike's answer を参照して、行を置き換えることをお勧めします

nViewH -= 250;

と

nViewH = nViewH / window.devicePixelRatio;

HTC Magic（PixelRatio = 1）およびSamsung Galaxy Tab 7 "（PixelRatio = 1.5）で確認したとおりに動作します。

10
Rafael Perelló

これはAndroid（少なくとも標準のGingerbreadブラウザーでは）：

<body onload="document.body.style.height=(2*window.innerHeight-window.outerHeight)+'px';"></body>

さらに、スクロールを無効にする場合は、使用できます

setInterval(function(){window.scrollTo(1,0)},50);
1
ranjan_purbey

これらのほとんどの問題は、ユーザーがまだ上にスクロールしてアドレスバーを表示できることです。永続的なソリューションを作成するには、これも追加する必要があります。

//WHENEVER the user scrolls
$(window).scroll(function(){
    //if you reach the top
    if ($(window).scrollTop() == 0)   
    //scroll back down  
    {window.scrollTo(1,1)}
})
1
user1869558

以下のいずれかが毎回機能します。

このサイトには他にもいくつかの提案がありますが、このナンセンスで心配のないものはgithub：Gistで利用でき、質問に答えます（便宜上ここに貼り付けます）：

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); }, 50 );
  }
}

window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } } );
window.addEventListener("orientationchange", hideAddressBar );

私が知る限り、ページに追加された余分な高さ（これが問題を引き起こした）とscrollTo（）ステートメントの組み合わせにより、アドレスバーが消えます。

同じサイトから、アドレスバーを非表示にする「最も簡単な」解決策はscrollTo（）メソッドを使用することです。

window.addEventListener("load", function() { window.scrollTo(0, 1); });

これにより、ユーザーがスクロールするまでアドレスバーが非表示になります。

このサイトでは、タイムアウト関数内に同じメソッドを配置しています（正当化は説明されていませんが、それがないとコードがうまく機能しないと主張しています）：

// When ready...
window.addEventListener("load",function() {
  // Set a timeout...
  setTimeout(function(){
    // Hide the address bar!
     window.scrollTo(0, 1);
  }, 0);
});
1
Adam Huddleston

私もそれが役に立つことを願っています

window.addEventListener("load", function() 
{
    if(!window.pageYOffset)
    { 
        hideAddressBar(); 
    }
    window.addEventListener("orientationchange", hideAddressBar);
});
0
user5988442

本体の高さをデバイスの画面の高さの最小にし、スクロールバーを非表示にする例を次に示します。 DOMSubtreeModifiedイベントを使用しますが、パフォーマンスの低下を避けるために、400msごとにのみチェックを行います。

var page_size_check = null, q_body;
(q_body = $('#body')).bind('DOMSubtreeModified', function() {
  if (page_size_check === null) {
    return;
  }
  page_size_check = setTimeout(function() {
    q_body.css('height', '');
    if (q_body.height() < window.innerHeight) {
      q_body.css('height', window.innerHeight + 'px');
    }
    if (!(window.pageYOffset > 1)) {
      window.scrollTo(0, 1);
    }
    page_size_check = null;
  }, 400);
});

テスト済みAndroidおよびiPhone。

0
JussiR