DCloud_UNI_GSQ
DCloud_UNI_GSQ
  • 发布:2019-01-29 16:14
  • 更新:2023-09-09 01:41
  • 阅读:119462

uni-app 全面屏、刘海屏适配(iphoneX适配)及安全区设置

分类:uni-app

iOS方案一:使用原生占位(仅App端支持)

manifest.json 文件 app-plus 节点下配下 safearea

"safearea": {  
    "background": "#CCCCCC",  
    "bottom": {  
        "offset": "auto"  
    }  
}

iOS方案二:不使用原生占位(非App端可以不配置manifest)

manifest.json 文件 app-plus 节点下配下 safearea

"safearea": {  
    "bottom": {  
        "offset": "none"  
    }  
}

然后在需要适配的页面内使用 css 常量 constant(safe-area-inset-bottom)、env(safe-area-inset-bottom) 来适配,参考:为iPhoneX设计网站。微信小程序模拟器不支持,以真机为准。

比如为列表底部添加内边距避开安全区,在 iPhoneX 上列表底部会有内边距,在其他设备上没有内边距:

<style>  
.list {  
  padding-bottom: 0;  
  padding-bottom: constant(safe-area-inset-bottom);  
  padding-bottom: env(safe-area-inset-bottom);  
}  
</style>

nvue 页面不支持 css 常量,可以使用 uni.getSystemInfo 获取 safeAreaInsets 动态设置到 style 属性。

注意:使用了pages.json里的原生tabbar,不管manifest里安全区设置如何,在tabbar下方都会留出空隙。

判断是否为刘海屏的方法

使用5+ API (plus.navigator.hasNotchInScreen)可查询当前设备是否为刘海屏。
详情参考:https://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.hasNotchInScreen

安卓底部虚拟按键背景色修改方式

使用Native.js修改:

var Color = plus.android.importClass("android.graphics.Color");    
    plus.android.importClass("android.view.Window");    
    var mainActivity = plus.android.runtimeMainActivity();    
    var window_android = mainActivity.getWindow();    
    window_android.setNavigationBarColor(Color.GREEN);  
24 关注 分享
DCloud_IOS_XTY 今天回复我了吗 Trust h***@163.com 3***@qq.com 9***@qq.com wenju 5***@qq.com _1900 aliang888 C1oudust ttrr 1***@qq.com c***@qq.com LunaYJ d***@163.com MooGu 老醒 苏陌 1***@qq.com nininiccc 1***@qq.com 1***@qq.com DCloud_UNI_HRK

要回复文章请先登录注册

李钊

李钊

```
var Color = plus.android.importClass("android.graphics.Color");
plus.android.importClass("android.view.Window");
var mainActivity = plus.android.runtimeMainActivity();
var window_android = mainActivity.getWindow();
window_android.setNavigationBarColor(Color.GREEN);
```
这个代码会阻塞页面跳转navigateTo
2023-09-09 01:41
IvanJiang123

IvanJiang123

安卓设置了safearea,但无法生效
2023-09-05 15:21
井

回复 petter45 :
安卓这种设置方法如果每个页面动态设置会出现,页面返回再次访问无法打开的问题,这个怎么解决呀?

请问最后你是怎么解决的啊,遇到了同样的问题。
贴子里的安卓代码,在一个页面中执行,多次返回进入页面,就进不去了。
2023-08-11 17:43
l***@163.com

l***@163.com

能不能出个单独设置安全区的方案?现在越来越多APP使用透明遮罩层引导页作为APP使用说明。但是安全区一大块白色特别丑,全局都不要安全区改动又特别大,每个页面都得单独设置样式。
2023-03-02 14:47
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 j***@qq.com :
这个帖子没有错哦,因为这个是 5+的不是 uni-app, 存在区别。
2023-01-03 11:53
x***@sina.com

x***@sina.com

回复 x***@sina.com :
我也愁死了要被这个挖孔屏
2023-01-01 20:05
j***@qq.com

j***@qq.com

回复 DCloud_UNI_GSQ :
https://ask.dcloud.net.cn/article/36995
这篇贴子也改下哦
2022-12-28 17:07
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 j***@qq.com :
收到,感谢反馈
2022-12-28 15:55
j***@qq.com

j***@qq.com

你们文档真的是乱写啊,safearea明明是要放在app-plus里面才生效,你们文档却说放在plus里面。
https://uniapp.dcloud.net.cn/tutorial/darkmode.html#ios-%E5%AE%89%E5%85%A8%E5%8C%BA%E5%9F%9F%E9%80%82%E9%85%8D
2022-12-28 09:59
j***@qq.com

j***@qq.com

backgroundDark不生效如何解决
2022-12-27 17:48