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

悠悠 2022-12-20 13:58 45阅读 0赞

## 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]。微信小程序模拟器不支持，以真机为准。

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

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

## 判断是否为刘海屏的方法 ##

使用5+ API （plus.navigator.hasNotchInScreen）可查询当前设备是否为刘海屏。  
详情参考：[https://www.html5plus.org/doc/zh\_cn/navigator.html\#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);

[iPhoneX]: https://webkit.org/blog/7929/designing-websites-for-iphone-x/
[https_www.html5plus.org_doc_zh_cn_navigator.html_plus.navigator.hasNotchInScreen]: https://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.hasNotchInScreen