iphoneX底部固定定位兼容处理

问题和解决原理：iPhoneX全面屏手机底部返回键悬浮占位且层级最高，媒体查询判断手机屏幕，底部固定定位元素向上偏移34px。

1.在项目中index.html的meta标签添加viewport-fit=cover

<meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

2.在公共css，common.css中加入

/* 适配iphoneX iphoneXS */

@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {

    .compatibility {

      padding-bottom:34px;

    }

  }

/* 适配iphoneXR iphoneXSMax */

@media only screen and (device-width: 414px) and (device-height:896px) and (-webkit-device-pixel-ratio:3) {

    .compatibility {

      padding-bottom:34px;

    }

  }

3.在脚部固定定位div上加class类名compatibility即可