DCloud_App_Array
DCloud_App_Array
  • 发布:2014-12-12 22:37
  • 更新:2024-06-13 19:43
  • 阅读:80609

iOS平台设置沉浸式状态栏显示效果

分类:HTML5+

系列文章导航:
状态栏大全-状态栏透明(沉浸式)、变色及全屏的区别
Android平台设置沉浸式状态栏显示效果
iOS平台设置沉浸式状态栏显示效果

正文:

应用可视区域到系统状态栏下透明显示效果,如下图所示:

此模式下应用占用全屏区域,而系统状态栏会拦截用户操作事件,此时需要预留出系统状态栏高度。
获取系统状态栏高度及沉浸式状态判断参考:如何动态判断沉浸式状态栏模式

HBuilder创建的应用默认不使用沉浸式状态栏样式,需要进行如下配置开启:
打开应用的manifest.json文件,切换到代码视图,在plus -> statusbar 下添加immersed节点并设置值为true。

"plus": {  
    "statusbar": {  
        "immersed": true  
    }  
}

如下图所示:

保存后提交App云端打包

注意事项:

  1. 真机运行不生效,需提交App云端打包后才生效;
  2. 此功能仅在iOS7及以上系统有效。
    3. 设置沉浸式状态栏后顶部有灰条的问题解决
    iOS11以上系统当启用沉浸式式状态栏后,webview默认会调整内容至安全区域之内,视觉效果如下图:
    如果不需要自动调整可以在meta(name="viewport")节点的content属性值中添加viewport-fit=cover

状态栏大全-状态栏透明(沉浸式)、变色及全屏的区别
iOS平台5+SDK原生环境配置方法
Android平台设置沉浸式状态栏显示效果

14 关注 分享
y7 蔡繁荣 safaring Trust 丶落叶de追求丶 程小猿 2***@qq.com bishuihanshan 马振丹 Masot typer c***@foxmail.com lazi 1***@qq.com

要回复文章请先登录注册

6***@qq.com

6***@qq.com

回复 typer :
你好 怎么解决的顶部和底部会有灰色的问题 我按照上面的设置并不生效呀
2020-12-15 17:44
越仔

越仔

按照上面都设置了ios不生效,应该怎么解决啊
2020-08-17 11:15
小明子

小明子

离线打包没有作用,需要修改main.storyboard
2020-08-13 14:59
3***@qq.com

3***@qq.com

回复 8***@qq.com :
我也是这样,请问你是怎么解决的呢最后?
2019-11-27 01:16
8***@qq.com

8***@qq.com

无效
2019-11-13 18:05
2***@qq.com

2***@qq.com

大佬好,之前app是hbulider打包的immersed": true这样写沉浸式导航栏有效果,现在hbuliderX打包沉浸式不起效果是为什么?您是怎么写的
2019-11-01 11:00
t***@163.com

t***@163.com

"immersed": true 如果在低于安卓4.4上运行,有什么影响?
2019-08-23 18:23
Alaric

Alaric

请问nvue如何设置viewport-fit=cover?
2019-08-01 14:29
厦门伊豚信息

厦门伊豚信息

ios使用hbuildr真机调试就可以出现沉浸,我之前开发的项目都没问题,放到hbuilderX就无法沉浸了
2019-05-22 17:19
8***@qq.com

8***@qq.com

测试版,设置了 statusbar, 设置了 viewport-fit=cover ,顶部还是有灰色。。。。
之前有打包过一次没问题的,后来就一直有灰色的了。。
2019-05-22 16:57