fix: 修复Safari和Chrome浏览器底部控件显示问题

index.html

@@ -23,6 +23,11 @@
             '--app-theme-color',
             appTheme,
           )
+
+          // 初始设置视口高度偏移量
+          const vh = window.innerHeight * 0.01
+          document.documentElement.style.setProperty('--vh-offset', `${(vh * 100) * 0.05}px`)
+          document.documentElement.style.setProperty('--vh', `${vh}px`)
         })()
       </script>
       <style>
@@ -35,7 +40,8 @@
         .first-loading-wrap {
           display: flex;
           width: 100%;
-          height: 100vh;
+          height: calc(100vh - var(--vh-offset, 0px));
+          height: 100dvh;
           justify-content: center;
           align-items: center;
           flex-direction: column;

src/layout/index.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable prettier/prettier -->
 <template>
-  <div class="h-screen flex flex-col">
+  <div class="h-[calc(100vh-var(--vh-offset,0px))] h-[100dvh] flex flex-col">
     <van-nav-bar v-if="getShowHeader" placeholder fixed :title="getTitle" />
     <routerView class="flex-1 overflow-x-hidden">
       <template #default="{ Component, route }">

src/main.ts

@@ -14,13 +14,16 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router, { setupRouter } from './router'
 import { setupStore } from '@/store'
+import { setupViewportHeight } from '@/utils/viewportHeight'
 
 async function bootstrap() {
   const app = createApp(App)
   // 挂载状态管理
   setupStore(app)
   // 挂载路由
   setupRouter(app)
+  // 设置视口高度处理
+  setupViewportHeight()
   await router.isReady()
   // 路由准备就绪后挂载APP实例
   app.mount('#app', true)

src/styles/var.less

@@ -2,3 +2,8 @@
 @primaryColor: #5d9dfe;
 @header-height: 46px;
 @footer-height: 50px;
+
+// 视口高度偏移量，用于移动端浏览器地址栏的处理
+:root {
+  --vh-offset: 0px;
+}

src/utils/viewportHeight.ts

@@ -0,0 +1,26 @@
+/**
+ * 处理移动端浏览器视口高度问题
+ */
+
+const supportsDvh = () => {
+  const div = document.createElement('div')
+  div.style.height = '100dvh'
+  return div.style.height === '100dvh'
+}
+
+export const setupViewportHeight = () => {
+  if (supportsDvh()) {
+    return
+  }
+
+  updateViewportHeight()
+
+  window.addEventListener('resize', updateViewportHeight)
+  window.addEventListener('orientationchange', updateViewportHeight)
+}
+
+const updateViewportHeight = () => {
+  const vh = window.innerHeight * 0.01
+  document.documentElement.style.setProperty('--vh-offset', `${(vh * 100) * 0.05}px`)
+  document.documentElement.style.setProperty('--vh', `${vh}px`)
+}