vant NavBar safe-area-inset-top 一加手机失效问题

APP内嵌H5活动页, 需要实现沉浸式效果，因此APP客户端打开H5页面的时候需要开启webview全屏设置，开启之后，页面顶部会遮盖状态栏，但Vant 提供的NavBar导航栏提供了适配顶部安全区域的解决方案，就是使用safe-area-inset-top，但是出现了两个问题；

问题一： IOS手机不支持

解决方案： 设置网页在可视窗口的布局方式，只有设置了 viewport-fit=cover，才能使用 env();

<meta name="viewport" content="width=device-width, viewport-fit=cover" />

问题二：安卓获取不到safe-area-inset-top安全距离,导致内容会顶上去和状态栏重合

解决方案：需要针对安卓手机，让客户端在打开H5之前在localstorage存储安全区域的值，自定义变量--safe-area-inset-top，并请将其放在根元素上，vant会自动获取该变量的值;

`

    document.documentElement.style?.setProperty("--safe-area-inset-top", localStorage.getItem("safeAreaInsetsTop")&&`${(localStorage.getItem("safeAreaInsetsTop") * 100).toFixed(2)}vh` || '48px' );

`

问题三：针对安卓做上述适配之后，在一加手机上还是不生效，究其原因，vant是使用env(safe-area-inset-top) 获取变量,  应该是env惹的祸

解决方案：使用js方法获取我们存好的safe-area-inset-top安全距离，然后手动修改vant NavBar组件的top值，在页面加载的时候 ，执行一下:

// 一加手机, webview开启全屏后, vant获取不到--safe-area-inset-top, 因为不支持env, 所以修改为手动设置top值;

`

const setAndroidAreaTop = () => {
    if (utils.isAndroid()) {
      const areaTopDom = document.querySelector('.van-safe-area-top')
      const paddTop = document.documentElement.style.getPropertyValue(
        '--safe-area-inset-top',
      )
      areaTopDom.style.paddingTop = paddTop
      console.log(
        '--safe-area-inset-top:',
        document.documentElement.style.getPropertyValue(
          '--safe-area-inset-top',
        ),
      )
    }
  }
onMounted(() => {
   setAndroidAreaTop()
})

`

和本人CSDN一致blog.csdn.net/w140130w/ar…