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

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

怪我咯
怪我咯

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

모든 응답(5)
小葫芦

cordova-플러그인-전체 화면

巴扎黑

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

左手右手慢动作

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

巴扎黑

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

刘奇
  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. 안드로이드에 대해 잘 모르고, 잘 모른다

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿