H5页面在iphone手机底部出现留白的情况

今天在测试的时候，发现自己的h5页面在iphone手机上，有刘海儿和底部弧形时，底部出现了留白，解决方案是：

找到整个项目的public，index.html，找到其中的meta，加入viewport-fit=cover

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

这句话的作用就是在适配手机型号的时候，能够自动补齐安全区域（safe area）以后的区域，这样我们下拉的时候，就不会漏出去了。

又研究了一下，其实是运用了css的constant（）函数，能够对非安全区域进行高度的设置，所以也可以去对整个区域的body设置，一般是在整个css的样式中设置一个集中样式:

body {
           padding-top: constant(safe-area-inset-top);
           padding-left: constant(safe-area-inset-left);
           padding-right: constant(safe-area-inset-right);
           padding-bottom: constant(safe-area-inset-bottom);
       }

主要是padding-bottom，设置之后，整个安全区域的bottom，会往下移动，这样底部留白会被占满。

但是如果觉得ios的小黑条和tabbar的底部重合的太多，不方便用户行为，vant组件库也提供了一个方法，在meta下继续进行适配: