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

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

2、在App.vue中引入scss

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 */

 

你可能感兴趣的:(uniapp)