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

Question

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

Answer 1

cordova-插件-全螢幕

Answer 2

狀態列沉浸是靠layout和style實現，webapp頁面也需要layout容器支撐，所以實現當然是可以的。 webapp不是純粹的web，依舊還是脫離不了native基礎架構的。

Answer 3

不就隱藏狀態列嘛？用原生程式碼去隱藏啊
沒用過 hybrid 具體不清楚

Answer 4

贊同@chuyao的說話，其實導覽列也可以用原生的

Answer 5

1. iOS 上的 webapp 無法隱藏狀態列

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">

4. iOS 上使用 設定全螢幕模式下的topbar 的樣式，三者差異不大，但皆無法隱藏topbar，具體看文檔

5. 文件：https://developer.apple.com/library/iad/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

6. 橫屏模式下 topbar 會隱藏

7. phonegap 不知道可不可以，hybrid 是可以實現的，比較常見的做法是 topbar + header 都是 Native 的，header 下面才是 Webview

Android 不是很了解，不清楚🎜🎜 🎜