uni-app开发ios App，如何去掉底部安全空白区域

秒速五厘米 2023-01-11 09:19 818阅读 0赞

在ios开发的过程当中，在ios设备上底部会出现一个安全空白区域：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70][]

如果想要去掉，在manifest.json中点开源码视图配置：

将所有 `iPhone X（刘海屏)` 底部安全区域背景颜色 **自动适应**，当前页面什么颜色会自动调整。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 1][]

代码：

将所有 `iPhone X（刘海屏)` 底部安全距离的背景色，**统一设置** 为一种颜色：

"app-plus" : {
            "background": "#CCCCCC", //背景色
            "safearea" : {
                //安全区域配置，仅iOS平台生效  
                "bottom" : {
                    // 底部安全区域配置  
                    "offset" : "none" // 底部安全区域偏移，"none"表示不空出安全区域，"auto"自动计算空出安全区域，默认值为"none"  
                }
            }
      }

给底部栏css样式加上以下代码即可  
calc是可以调距离的！  
padding-bottom: constant(safe-area-inset-bottom);  
padding-bottom: calc(30rpx + env(safe-area-inset-bottom));   
env(safe-area-inset-bottom)就是ios安全区域的距离

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70]: /images/20221119/7cdc10e90e42448181ef22bce5a7065b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210715144211196.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4,size_16,color_FFFFFF,t_70