MUI适配iphoneX

调试部分：

电脑下载一个itunes

image.png

弹出框出现信任XXXXX？的时候，点击信任

打开设置--通用- 如下

image.png

点击--再点击--选择信任

主要代码：
想要左图或者更丑的布局，做成右图一样

image.png

一：使安全区域置底，并且层级小于nav导航。
在manifest.json文件中找到“plus”节点，加入以下代码：

"safearea": {
                "bottom": {// 底部安全区域配置
                    "offset": "0",
                    "z-index":2
                }
        }

二：使页面全覆盖。页面meta标签中加入：

viewport-fit=cover

上图为viewport-fit=contain、viewport-fit=auto默认，下图表示viewport-fit=cover
![image.png](https://img.haomeiwen.com/i9106723/dba14785376a8362.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
三：iphoneX手机页面的媒体查询：

@media only screen and (device-width: 375px) and (device-height: 812px) {
.mui-bar.mui-bar-tab{
padding-bottom: 34px;
}
}

.mui-bar.mui-bar-tab表示导航块级，加个底部padding抬高

或者你只需直接这么写：

"safearea": {
background:"#3e2",
"bottom": {// 底部安全区域配置
"offset": "auto"
}
}

使你的安全区域背景颜色变成nav导航菜单一样的颜色，但是你不能保证你的所有页面都会使用同一个颜色的nav底部或者body