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

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

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

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

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

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

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

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

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

安卓底部虚拟按键背景色修改方式
使用Native.js修改: