云闪付获取顶部胶囊按钮距离（iphone获取安全区域）

iphone获取云闪小程序顶部胶囊按钮距离（iphone获取安全区域）

云闪付内嵌h5页面，顶部定位盒子，iphone各种机型会出现盒子与云闪付APP胶囊按钮高度不一致，高低不平的情况

.box_top {

  padding-top: calc(constant(safe-area-inset-top));

  padding-top: calc(env(safe-area-inset-top));

}

calc:  css3的 calc()函数允许我们在属性值中执行数学计算操作，例如：width: calc(100px + 50px); 我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。

env()和constant() 是IOS11新增特性， Webkit的css函数，用于设定安全区域与边界的距离，有四个预订义变量：

● constant( ) :  兼容 IOS < 11.2 
● env( ) : 兼容IOS >= 11.2 
● safe-area-inset-left：安全区域距离左边边界的距离 
● safe-area-inset-right：安全区域距离右边边界的距离 
● safe-area-inset-top：安全区域距离顶部边界的距离 
● safe-area-inset-bottom ：安全距离底部边界的距离 

而env()和constant()函数有个必要的使用前提，H5网页设置viewport-fit=cover的时候才生效。