前端 - 移动端WebApp开发,如何实现状态栏沉浸式效果?
怪我咯
怪我咯 2017-04-17 17:23:52
0
5
1175

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

怪我咯
怪我咯

走同样的路,发现不同的人生

全員に返信(5)
小葫芦

cordova-plugin-fullscreen

いいねを押す +0
巴扎黑

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

いいねを押す +0
左手右手慢动作

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

いいねを押す +0
巴扎黑

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

いいねを押す +0
刘奇
  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 についてはあまり詳しくありません、わかりません

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート