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

Question

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

Answer 1

cordova-plugin-fullscreen

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"> 设置全屏模式下的 topbar 的样式，三者差别不大，但是均无法隐藏 topbar，具体看文档

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

5. 横屏模式下 topbar 会隐藏

6. phonegap 不知道可不可以，hybrid 是可以实现的，比较常见的做法是 topbar + header 都是 Native 的，header 下面才是 Webview

7. Android 不是很了解，不清楚