解决ios小程序，app底部黑线问题

ios小程序，app底部黑线问题

---

项目场景:商场类型小程序有些页面是支付按钮是固定定位在页面底部的，

这里ios部分机型的黑线/导航条会处于按钮之中，影响操作

解决方案：

例如：有三种办法:
1.一棒子打死法，直接给这个页面添加padding
缺陷：安卓机型不需要这个padding导致与页面底部不能紧密贴合，影响操作

2.调取获取设备信息的接口再进行判断，这用uni-app举例子直接调用uni.getSystemInfo(OBJECT）方法 判断他的system(操作系统名称及版本)字段是否为ios10及其以上 然后再动态绑定页面的padding
缺陷：较为麻烦

3.第三种，ios新增特性： CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：
safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离 (默认的是34px)
以上四个都是有默认值的
再利用css的constant以及env函数 （ ios11.2版本以后constant废弃，env生效 为了兼容ios11一下建议两个都写上并且constant写在env的前面
例如：
padding-bottom:constant(safe-area-inset-bottom);
padding-bottom:env(safe-area-inset-bottom);
如果想要自定义边距就需要用到css 的 动态计算函数calc()
例如想要一个20的padding-bottom ：
padding-bottom: calc(env(safe-area-inset-bottom) - 14px)