IOS 兼容iphonex 系列手机安全区域下，底部吸底样式问题

1.由于为了适配IphoneX系列得顶部和底部，设置出了安全区域，上下2部分空出白色区域（34px,来装载底部得控制条和顶部栏），但是由于底部吸底得公共组件也是白色，与底部空出得安全区域接洽，造成底部吸底组件空出得空白区域较多显得突兀（padding-bottom+底部安全padding-top）

• 判断dang’qian由于为了适配IphoneX系列得顶部和底部，设置出了安全区域，上下2部分空出白色区域（34px,来装载底部得控制条和顶部栏），但是由于底部吸底得公共组件也是白色，与底部空出得安全区域接洽，造成底部吸底组件空出得空白区域较多显得突兀（padding-bottom+底部安全padding-top）

判断当前设备

export function checkIphoneType() {
  // 判断是否为ios 系统，
  if (window !== 'undefined' && window && userAgentType() !== 'ios') return false;
  // 目前市场上iphone X 系列的手机型号
  const xSeriesConfig = [
    {
      // iPhone Xs（Max,Pro Max）
      devicePixelRatio: 3,
      width: 414,
      height: 896,
    },
    {
      // iPhone XR（11）
      devicePixelRatio: 2,
      width: 414,
      height: 896,
    },
    {
      // iPhone X（Xs,Pro）
      devicePixelRatio: 3,
      width: 375,
      height: 812,
    },
  ];
  // 获取当前 型号手机的设备信息
  const {
    devicePixelRatio,
    screen: { width, height },
  } = window;
  return xSeriesConfig.some(
    (item) =>
      item.devicePixelRatio === devicePixelRatio && item.width === width && item.height === height,
  );
}

在吸底得组件加上去除padding样式

 .btn-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    padding: 10px 16px;
    background: #ffffff;
    &.isIphoneX{
      padding-bottom:0px ;
    }
  }

绑定样式

 <div :class="['btn-row', isIphoneX ? 'isIphoneX' : '']" v-show="isOriginHei">
   <button class="home-btn add-box-btn" type="primary" @click="addNewBox">
     <Icon type="jiahao" />
   </button>
 </div>

created() {
    this.isIphoneX = checkIphoneType(); // 判断是否为iphone x系列的手机
   
  },

这个处理是在已经做了安全区域的情况下得一种优化。