uniapp Apple security zone configuration

question

Many models of IOS Apple mobile phones have a black line at the bottom. Compatible with bottom toggle

Solution

1. If you are using the native tabbar, open manifest.json, find the source view and add the safearea field in the app-plus node. This is to configure the safe area configuration of iPhoneX. Just fill in none

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

 

2. Assign a safe value through padding-bottom or bottom. uniapp has two built-in safe values  

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;