vue项目移动端苹果底部黑线遮挡自适配的问题

我自己做的vue移动端项目，测试发现苹果手机底部tab栏会被苹果手机底下黑线遮挡，我在网上搜搜了很多，发现以下方法是最简单的解决方案！！！

1、vue项目中要有scss插件，没有的请百度下载，首先在src根目录中创建后缀名为scss的文件，文件名取啥都行，然后在这个文件中复制以下这个代码。

body {
    padding-bottom: constant(safe-area-inset-bottom);/* 兼容 iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
  }

2、然后在App.vue根组件中引用这个common.scss文件，一定要引用这个文件，不然没效果！！！

 

3、然后在主目录上找到这个index.html文件，在里面替换meta这段代码，替换之前是这个代码，<meta name="viewport" content="width=device-width,initial-scale=1.0">，下面图片是替换完之后的代码。保存之后就可以在苹果手机中查看效果了！！！

 

<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">