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()
 })