web-dev-qa-db-ja.com

AndroidのフルスクリーンWebアプリ

HTML5でプログラミングしたWebアプリをAndroidのフルスクリーンモードで実行したい。 （ステータスバーとアドレス/ナビゲーションバーを非表示にします）

iOSの場合は、次のように書くだけです。

<meta name="Apple-mobile-web-app-capable" content="yes" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

しかし、それはAndroidでは機能しませんでした。

Javascriptには多くのソリューションがありますが、私が試したすべてのソリューションは動作しません。

誰かが解決策を知っていますか？

javascriptandroidhtml5web-applications
37
user959456

誰もがデフォルトのAndroid webbrowser（たとえば、イルカが好きです）を使用しているわけではないので、そのためのグローバルなソリューションは見つかりません。

その事実に直面して、そのような動作を強制するために、すべての汚いjavascriptハックを試す必要があります。

これがAppleデバイスで機能する唯一の理由は、Appleはカスタムブラウザの開発について非常に制限的であり、誰もがデフォルトのアプリにこだわるという事実です。

3
Knickedi

これはChrome for Androidで機能しました。

これをheadタグに追加します。

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

次に、chromeブラウザメニューで、[ホームページに追加]に移動します。このアイコンにより、ウェブサイトが全画面で開きます。

30
jason

IOS用のHTMLメタタグとJavaScriptソリューションを組み合わせて使用​​しています。 iOSのアドレスバーとAndroidデバイス。画面。

<meta name="Apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<script type='text/javascript' charset='utf-8'>
    // Hides mobile browser's address bar when page is done loading.
      window.addEventListener('load', function(e) {
        setTimeout(function() { window.scrollTo(0, 1); }, 1);
      }, false);
</script>

バックエンドでPHPを使用して、モバイルブラウザ用のJavaScriptを次のモバイルブラウザ検出でのみレンダリングします

if (preg_match('/iphone|iPod|Android/',strtolower($_SERVER['HTTP_USER_AGENT'])))
9
philipp

これを実現するには、Googleの新しいプログレッシブWebアプリにサービスワーカーを追加します。こちらをご覧ください： https://addyosmani.com/blog/getting-started-with-progressive-web-apps/ および https://developers.google.com/web/progressive-web-apps / 。

ウェブアプリのホーム画面にアイコンを追加したり、フルスクリーンにしたり、プッシュ通知を使用したりできます。

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

このタグは、iPhoneのホーム画面にサイトを追加した後、クロムレス環境を表示するように設計されています。

Androidで動作するためにこれに依存することはありません。

ページが読み込まれた後にブラウザバーを邪魔にならないようにするには、次の質問の答えを参照してください： ブラウザからアドレスバーを削除する（Androidで表示するには）

1
m6tt

Googleが示すとおり

Chrome M31であるため、デバイスのホーム画面にアプリケーションショートカットアイコンを追加するようにWebアプリをセットアップし、Chrome Androidの[ホーム画面に追加]メニュー項目。

https://developer.chrome.com/multidevice/Android/installtohomescreen を参照してください

1
Alex Nolasco