h5适配iphone 刘海安全距离 （vue）

1.在页面的meta中加上：viewport-fit: cover，将页面扩充到整个屏幕

<meta name="viewport" content="viewport-fit=cover">

2.App.vue 加样式名， safe-area-content，名字可以随便起

<div id="app" class="safe-area-content">
</div>

3. 加上下面样式

.safe-area-content {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}