84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
webapp如何像一些native app一样使用Android 5.0+和iOS的沉浸式状态栏效果呢?如果单纯的webapp无法实现的话,使用phonegap生产的hybrid app可以实现吗?效果如:
走同样的路,发现不同的人生
cordova-插件-全屏
状态栏沉浸是靠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-插件-全屏
状态栏沉浸是靠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 不是很了解,不清楚