From 46e8effa409011d140dafb53beb23b712149fc84 Mon Sep 17 00:00:00 2001
From: yingzi2019 <maotao@tutamail.com>
Date: Mon, 4 Aug 2025 02:18:51 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DSafari=E5=92=8CChrome?=
 =?UTF-8?q?=E6=B5=8F=E8=A7=88=E5=99=A8=E5=BA=95=E9=83=A8=E6=8E=A7=E4=BB=B6?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 问题描述
在Safari和Chrome浏览器中，登录成功后底部的控件（tabbar）不显示，而在UC浏览器中可以正常显示。

## 解决方案
1. 使用dvh单位替换vh单位，以适应不同浏览器的动态视口高度
2. 为不支持dvh的浏览器提供降级方案，使用calc(100vh - var(--vh-offset))
3. 添加视口高度处理工具函数，动态计算和更新视口高度偏移量

## 修改内容
- 修改layout/index.vue中的高度单位
- 修改index.html中的加载动画容器高度
- 添加视口高度处理工具函数
- 在应用启动时初始化视口高度处理

## 相关issue
Closes #38
---
 index.html                  |  8 +++++++-
 src/layout/index.vue        |  2 +-
 src/main.ts                 |  3 +++
 src/styles/var.less         |  5 +++++
 src/utils/viewportHeight.ts | 26 ++++++++++++++++++++++++++
 5 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 src/utils/viewportHeight.ts

diff --git a/index.html b/index.html
index 99a063f..2a612e9 100644
--- a/index.html
+++ b/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;
diff --git a/src/layout/index.vue b/src/layout/index.vue
index ad9f027..d139e9a 100644
--- a/src/layout/index.vue
+++ b/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 }">
diff --git a/src/main.ts b/src/main.ts
index 9fd0030..7726439 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -14,6 +14,7 @@ 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)
@@ -21,6 +22,8 @@ async function bootstrap() {
   setupStore(app)
   // 挂载路由
   setupRouter(app)
+  // 设置视口高度处理
+  setupViewportHeight()
   await router.isReady()
   // 路由准备就绪后挂载APP实例
   app.mount('#app', true)
diff --git a/src/styles/var.less b/src/styles/var.less
index 59743ee..00275c1 100644
--- a/src/styles/var.less
+++ b/src/styles/var.less
@@ -2,3 +2,8 @@
 @primaryColor: #5d9dfe;
 @header-height: 46px;
 @footer-height: 50px;
+
+// 视口高度偏移量，用于移动端浏览器地址栏的处理
+:root {
+  --vh-offset: 0px;
+}
diff --git a/src/utils/viewportHeight.ts b/src/utils/viewportHeight.ts
new file mode 100644
index 0000000..0ce8935
--- /dev/null
+++ b/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`)
+}
\ No newline at end of file