webapp如何像一些native app一样使用Android 5.0+和iOS的沉浸式状态栏效果呢?如果单纯的webapp无法实现的话,使用phonegap生产的hybrid app可以实现吗?效果如:
走同样的路,发现不同的人生
cordova-plugin-fullscreen
状态栏沉浸是靠layout和style实现,webapp页面也需要layout容器支撑,所以实现当然是可以的。webapp并不是纯粹的web,依旧还是脱离不了native基础框架的。
不就隐藏状态栏嘛?用原生代码去隐藏啊没用过 hybrid 具体不清楚
赞同@chuyao的说话,其实导航栏也可以用原生的
iOS 上的 webapp 无法隐藏状态栏
iOS 上使用 <meta name="apple-mobile-web-app-capable" content="yes"> 开启全屏模式,否则会存在地址栏
<meta name="apple-mobile-web-app-capable" content="yes">
iOS 上使用 <meta name="apple-mobile-web-status-bar-style" content="normal|black|black-translucent"> 设置全屏模式下的 topbar 的样式,三者差别不大,但是均无法隐藏 topbar,具体看文档
<meta name="apple-mobile-web-status-bar-style" content="normal|black|black-translucent">
文档:https://developer.apple.com/library/iad/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
横屏模式下 topbar 会隐藏
phonegap 不知道可不可以,hybrid 是可以实现的,比较常见的做法是 topbar + header 都是 Native 的,header 下面才是 Webview
Android 不是很了解,不清楚
cordova-plugin-fullscreen
状态栏沉浸是靠layout和style实现,webapp页面也需要layout容器支撑,所以实现当然是可以的。webapp并不是纯粹的web,依旧还是脱离不了native基础框架的。
不就隐藏状态栏嘛?用原生代码去隐藏啊
没用过 hybrid 具体不清楚
赞同@chuyao的说话,其实导航栏也可以用原生的
iOS 上的 webapp 无法隐藏状态栏
iOS 上使用
<meta name="apple-mobile-web-app-capable" content="yes">
开启全屏模式,否则会存在地址栏iOS 上使用
<meta name="apple-mobile-web-status-bar-style" content="normal|black|black-translucent">
设置全屏模式下的 topbar 的样式,三者差别不大,但是均无法隐藏 topbar,具体看文档文档:https://developer.apple.com/library/iad/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
横屏模式下 topbar 会隐藏
phonegap 不知道可不可以,hybrid 是可以实现的,比较常见的做法是 topbar + header 都是 Native 的,header 下面才是 Webview
Android 不是很了解,不清楚