uniapp-iPhoneX和iPhoneX Max 的底部小黑条挡住底部tab

1、在template.h5.html中添加viewport-fit=cover

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

2、在App.vue中引入scss

<style lang="scss">
	/*每个页面公共css */
	@import '/css/common.scss';
</style>

3、在common.scss文件中设置body样式

/*坑：解决iphoneX等大屏手机底部小黑条挡住tab的解决方法：安全区域距离底部边界距离env() 跟 constant() 需要同时存在，而且顺序不能换。*/
/* #ifdef H5 */
body {
  padding-bottom: constant(safe-area-inset-bottom);/* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}
/* #endif */