前端 - 移动端WebApp开发，如何实现状态栏沉浸式效果？

Question

webapp如何像一些native app一样使用Android 5.0+和iOS的沉浸式状态栏效果呢？
如果单纯的webapp无法实现的话，使用phonegap生产的hybrid app可以实现吗？
效果如：

Answer 1

cordova-plugin-fullscreen

Answer 2

ステータス バーの没入はレイアウトとスタイルによって実現されます。Web アプリ ページにはレイアウト コンテナーのサポートも必要なので、もちろん実装できます。 Webapp は純粋な Web ではなく、依然としてネイティブの基本フレームワークから分離できません。

Answer 3

ステータスバーを非表示にしてみませんか?ネイティブコードを使用して非表示にします
ハイブリッドを使用したことがないため、詳細はわかりません

Answer 4

@chuyao の意見に同意します。実際、ナビゲーション バーはネイティブのナビゲーション バーも使用できます

Answer 5

1. iOS の Web アプリはステータス バーを非表示にできません

2. iOS で <meta name="apple-mobile-web-app-capable" content="yes"> を使用して全画面モードを有効にします。そうしないと、アドレス バーが表示されます

3. iOS で <meta name="apple-mobile-web-status-bar-style" content="normal|black|black-translucent"> を使用して、全画面モードでトップバーのスタイルを設定します。これら 3 つに大きな違いはありませんが、トップバーを非表示にすることはできません。詳細については、ドキュメント

   を参照してください。

4. ドキュメント: https://developer.apple.com/library/iad/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

5. ランドスケープモードではトップバーが非表示になります

6. フォンギャップが実装できるかどうかはわかりません。より一般的なアプローチは、トップバーとヘッダーが両方ともネイティブであり、Webview がヘッダーの下にあることです。

7. Android についてはあまり詳しくありません、わかりません