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

Question

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

Answer 1

cordova-플러그인-전체 화면

Answer 2

상태 표시줄 몰입은 레이아웃과 스타일에 의해 이루어지며 웹앱 페이지에도 레이아웃 컨테이너 지원이 필요하므로 당연히 구현할 수 있습니다. Webapp은 순수한 웹이 아니며 여전히 기본 기본 프레임워크와 분리될 수 없습니다.

Answer 3

상태 표시줄을 숨기면 어떨까요? 숨기려면 네이티브 코드를 사용하세요
하이브리드를 사용해본 적이 없어서 자세한 내용은 모르겠습니다

Answer 4

@chuyao님 말씀에 동의합니다. 사실 네비게이션 바는 기본 네비게이션 바를 사용할 수도 있습니다

Answer 5

1. iOS의 웹앱은 상태 표시줄을 숨길 수 없습니다

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. 문서: https://developer.apple.com/library/iad/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

5. 가로 모드에서는 상단바가 숨겨집니다

6. phonegap이 가능한지는 모르겠습니다. 하이브리드 구현도 가능합니다. 더 일반적인 접근 방식은 상단바 + 헤더가 모두 네이티브이고 웹뷰가 헤더 아래에 있다는 것입니다

7. 안드로이드에 대해 잘 모르고, 잘 모른다