iPhoneX设计稿适配Android,uni-app 全面屏、刘海屏适配(iphoneX适配)及安全区设置...

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 上列表底部会有内边距,在其他设备上没有内边距:

.list {

padding-bottom: 0;

padding-bottom: constant(safe-area-inset-bottom);

padding-bottom: env(safe-area-inset-bottom);

}

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

判断是否为刘海屏的方法

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

使用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);

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值