찾다

 >  Q&A  >  본문

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

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

怪我咯怪我咯2767일 전1163

모든 응답(5)나는 대답할 것이다

  • 高洛峰

    高洛峰2017-04-17 17:25:52

    cordova-플러그인-전체 화면

    회신하다
    0
  • 巴扎黑

    巴扎黑2017-04-17 17:25:52

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

    회신하다
    0
  • ringa_lee

    ringa_lee2017-04-17 17:25:52

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

    회신하다
    0
  • 巴扎黑

    巴扎黑2017-04-17 17:25:52

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

    회신하다
    0
  • 怪我咯

    怪我咯2017-04-17 17:25:52

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

    회신하다
    0
  • 취소회신하다