安全距离

先看下代码

body {
 
  padding-top: constant(safe-area-inset-top);  //为导航栏+状态栏的高度 88px     
 
  padding-left: constant(safe-area-inset-left);  //如果未竖屏时为0       
 
  padding-right: constant(safe-area-inset-right); //如果未竖屏时为0       
 
  padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px  

  padding-top: env(safe-area-inset-top); //兼容IOS>11.2 env
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom); 
 
} 

名词解释

env()和constant()，是IOS11新增特性，

作用是取得常量值

使用前提条件

<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">

注：微信小程序，默认viewport-fit=cover

结合calc使用

height: calc(96rpx+ constant(safe-area-inset-bottom));//兼容 IOS<11.2
 
height: calc(96rpx + env(safe-area-inset-bottom));//兼容 IOS>11.2
 
padding-bottom: constant(safe-area-inset-bottom);//兼容 IOS<11.2
 
padding-bottom: env(safe-area-inset-bottom);//兼容 IOS>11.2