0

モバイル Web アプリ (ネイティブではない) を作成しており、アプリケーションの画面全体の高さを使用したいと考えています。問題は、ブラウザーのアドレス バーが多くのスペースを占有し、画面全体の約 4/5 しか残っていないことです。

スクロールがないようにアプリを作成しました。サイトは常にユーザーの画面の高さに収まります。私が本当に求めているのは、Facebook モバイル Web サイトの機能です。下にスクロールしてアドレスバーを非表示にします。

Android デバイスと Iphone、およびさまざまなモバイル ブラウザー (さまざまなアドレス バーのサイズ) で、これを行う普遍的な方法はありますか?

ところで: Iscroll4 を使用して固定フッターとヘッダーを取得しています。

編集:これは私が最終的に得たコードです。フルスクリーン モードを使用するかどうかをユーザーが選択できるように、2 つのボタンを追加しました。このコードは、Iscroll4 および Jquery と組み合わせて機能します。

<script type="text/javascript">
$(document).ready(function() {
    var fullscreen = false;

    if(fullscreen==false)
    {
        window.removeEventListener("orientationchange", function(){ hideAddressBar(); } );
        window.addEventListener("orientationchange", function(){ showAddressBar(); } );
    }
    else
    {
        window.removeEventListener("orientationchange", function(){ showAddressBar(); } );
        window.addEventListener("orientationchange", function(){ hideAddressBar(); } );
    }

    $('#fullscreen').click(function(){
       hideAddressBar();
       fullscreen = true;
    });
    $('#normalscreen').click(function(){
       showAddressBar();
       fullscreen = false;
    });

});
function hideAddressBar()
{
    document.body.style.height = (window.outerHeight + 20) + 'px';
    window.scrollTo(0, 1);
}
function showAddressBar()
{
    document.body.style.height = (window.outerHeight - 20) + 'px';
    window.scrollTo(0, 0);
}

4

4 に答える 4

2

これがどのように達成されるかについての良い記事をここで見つけることができます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); }, 50 );
  }
}

window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } } );
window.addEventListener("orientationchange", hideAddressBar );
于 2012-05-08T10:44:13.740 に答える
2

「スクロールダウン」JavaScript トリックは、iPhone と Android の両方で機能するはずです。

http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/

申し訳ありませんが、他のモバイルブラウザについてはわかりません。Blackberry、Windows phone など、またはより基本的な電話について話しているのですか?

于 2012-05-08T10:43:09.237 に答える
1

私が通常これを行う方法は次のとおりです。

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

ただし、ページが少し下にスクロールするのに十分な長さである場合にのみ機能します。

于 2012-05-08T10:41:54.973 に答える
0

これを試して、

アンドロイド用：

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

iPhone の場合:

<meta name="apple-mobile-web-app-capable" content="yes" />
于 2012-05-08T10:43:22.917 に答える