DCloud_UNI_GSQ
DCloud_UNI_GSQ
  • 发布:2019-01-29 16:14
  • 更新:2022-05-18 10:50
  • 阅读:88952

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>

注意:使用了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);  
22 关注 分享
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

要回复文章请先登录注册

Simon丶

Simon丶

nvue页面不支持css常量和变量,请问如何使用方案二?
2022-05-18 10:50
m***@jaiden.cn

m***@jaiden.cn

回复 3***@qq.com :
Color.parseColor("#FFF")
2022-05-05 17:00
5***@qq.com

5***@qq.com

回复 t***@163.com :
你好,请问这种情况怎么解决?
2022-04-24 17:12
d***@Crbeverage.com

d***@Crbeverage.com

横屏的时候,IOS设备能正常显示吗?这个时候刘海在左边或者右边
2021-12-14 16:28
t***@163.com

t***@163.com

上述方法不能解决,打包为H5 的情况下,ios ,iPhonex 图片预览时候,遮罩不能遮满整个屏幕,底部有空白
2021-12-09 17:30
小蹦

小蹦

nvue页面如何适配呢
2021-12-03 11:06
xxxxx89749837

xxxxx89749837

回复 DCloud_UNI_GSQ :
window_android.setNavigationBarColor(Color.GREEN)在首次编译后,会导致页面格式混乱,不能点击。只有等页面重载,或者切换app后才能恢复正常。
2021-11-19 16:34
3***@qq.com

3***@qq.com

回复 DCloud_UNI_GSQ :
你好, window_android.setNavigationBarColor(Color.GREEN); 颜色的形式只能是用英文的?可以使用#FFF这种类型?
2021-11-02 17:52
3***@qq.com

3***@qq.com

你好, window_android.setNavigationBarColor(Color.GREEN); 颜色的形式只能是用英文的?可以使用#FFF这种类型?
2021-11-02 17:17
1***@qq.com

1***@qq.com

你好, window_android.setNavigationBarColor(Color.GREEN); 颜色的形式只能是用英文的?可以使用#FFF这种类型?
2021-11-01 17:02