uniapp 苹果安全区配置

问题

IOS苹果手机有很多款手机底部都有一条黑线。兼容底部的切换

解决方法

1. 如果使用的是原生自带的tabbar  打开manifest.json 找到源码视图 在 app-plus 节点 添加  safearea 字段  这个就是配置  iPhoneX的安全区域配置  填写 none 就可以

“app-plus” : {
     /*  iPhoneX的安全区域配置。 */
        "safearea" : {
            "background" : "#FFFFFF", // 安全区域外的背景颜色，默认值为"#FFFFFF"  
            "bottom" : {
                // 底部安全区域配置  
                "offset" : "none|auto" // 底部安全区域偏移，"none"表示不空出安全区域，"auto"自动计算空出安全区域，默认值为"none"  
            },
            "left" : {
                // 左侧安全区域配置（横屏显示时有效）  
                "offset" : "none|auto"
            },
            "right" : {
                // 右侧安全区域配置（横屏显示时有效）
                "offset" : "none|auto"
            }
        },
}

 

2.通过padding-bottom或者bottom赋一个安全值  uniapp内置了两个安全值  

constant(safe-area-inset-top);

env(safe-area-inset-top);  

 

padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: border-box;