web-dev-qa-db-ja.com

HTML5フルスクリーンWebアプリ：ブラウザーバーなし

モバイルデバイス用のHTML5 Webアプリを作成していますが、ブラウザーを非表示にするように求められましたナビゲーションバー（戻るボタンと進むボタン）（ここは前のタイプです） 。どうすればそれを達成できますか？

Phone Gapを使用してそれを達成できると思います。しかし、「通常の」Webアプリでブラウザバーを非表示にすることは可能でしょうか。ウェブサイト/アプリをホーム画面に固定すれば可能だと思いますか？

iPhoneには http://ajaxian.com/archives/iphone-full-screen-webapps がありますが、少なくともAndriodはどうですか？

html5mobile
13
Jiew Meng

私はこの質問がこの時点で少し時代遅れであることを知っているので、ここに更新があります：

IOS 7以降のSafariでは、このソリューションは優れています。

<meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Minimal-ui属性により、ブラウザはすべてのボタンを非表示にし、タスクバーはそのままにします。

これはAndroidでテストしていません。

12
Sheldonbrax

Webアプリで JQuery を使用できる場合は、 NiceScroll プラグインを使用することをお勧めします。

モバイルブラウザとデスクトップブラウザの両方に使用でき、ブラウザのスクロールバーを非表示にします。コードがブラウザのビューポートの高さを超えている場合、使用されていない場合はフェードアウトするカスタムスクロールバーが作成されます。

デモ です。

編集：
更新ごとに、私は実際にネイティブのモバイルWebアプリ開発者ではありませんが、問題を検索しているときに役立つSOの質問あなたはさらに道をリードする：

そして、これらのチュートリアル：

7
Asif

このアプリケーションをAndroidで使用できます： キオスクWeb/Htmlブラウザー 、sdカードにフォルダーを作成します。 「没入モード」。

1
fabiodipa

最新のChrome for Android beta： https://developers.google.com/chrome/mobile/docs/installtohomescreen

0
Denes Papp

[〜＃〜] edit [〜＃〜]

新しい答え

この質問が尋ねられて以来、多くの変化がありました。スクロール、固定位置のネイティブサポートが良好になり、ほとんどのOSのブラウザバーは当時よりずっと小さくなりました。これが事実であるため、ほとんどのサイトおよび回答が推奨するように、スクロールハックに頼らないことをお勧めします。 OSのルールに従うことで、Webアプリケーションの安定性、使いやすさ、および将来の互換性が向上します。

古い回答

誰かがそれをwebappとしてホームスクリーンに保存すると、iPhoneで可能になります。適切なメタタグを追加すると機能します。

標準のブラウザモードでは、ハックにフォールバックする必要があるため、少し注意が必要です。基本的に、スクロールするとアドレスバーが消えます（iPhoneの場合と、Androidの場合ほとんどの場合）。これをjavascriptで偽造できます。モバイルツッツにも良い記事があります： http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/ 、これはコンテンツが長い場合にのみ機能画面解像度。

0
Tosh
<script> function requestFullScreen() {

  var el = document.body;

  // Supports most browsers and their versions.
  var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen 
  || el.mozRequestFullScreen || el.msRequestFullScreen;

  if (requestMethod) {

    // Native full screen.
    requestMethod.call(el);

  } else if (typeof window.ActiveXObject !== "undefined") {

    // Older IE.
    var wscript = new ActiveXObject("WScript.Shell");

    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
}


</script>
<a href="#" onClick="requestFullScreen();"> click </a>
0
Cícero Alexandre Alves Lima