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

Question

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

Answer 1

cordova-plugin-fullscreen

Answer 2

Status bar immersion is achieved by layout and style. The webapp page also needs to be supported by the layout container, so of course it can be implemented. Webapp is not a pure web, and it still cannot be separated from the native basic framework.

Answer 3

Why not just hide the status bar? Use native code to hide it
I have never used hybrid. I don’t know the details

Answer 4

I agree with what @chuyao said. In fact, the navigation bar can also be native

Answer 5

1. Webapp on iOS cannot hide status bar

2. Use <meta name="apple-mobile-web-app-capable" content="yes"> on iOS to enable full screen mode, otherwise the address bar will exist<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. Use <meta name="apple-mobile-web-status-bar-style" content="normal|black|black-translucent"> on iOS to set the topbar in full screen mode There is not much difference between the three styles, but neither of them can hide the topbar. Please refer to the documentation for details

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

6. The topbar will be hidden in landscape mode

7. phonegap I don’t know if it is possible, hybrid can be realized, the more common method is that topbar + header are both Native, and the Webview is below the header

I don’t know much about Android, I don’t know🎜🎜 🎜