debugger

Web/src/App.vue

@@ -33,6 +33,12 @@ import { ref, onMounted, onUnmounted, computed } from 'vue'
 const log = ref('')
 
 const updateInfo = () => {
+  // 获取真实的视口高度（PWA 模式下准确）
+  const vh = window.innerHeight
+  // 设置 CSS 变量，让所有组件使用准确的视口高度
+  document.documentElement.style.setProperty('--vh', `${vh}px`)
+  document.documentElement.style.setProperty('--vh-offset', `${vh}px`)
+  
   log.value = JSON.stringify({
     innerHeight: window.innerHeight,
     outerHeight: window.outerHeight,
@@ -43,16 +49,24 @@ const updateInfo = () => {
         offsetTop: window.visualViewport.offsetTop,
       }
       : null,
+    cssVarVh: getComputedStyle(document.documentElement).getPropertyValue('--vh'),
   }, null, 2)
 }
 
 onMounted(() => {
   updateInfo()
   window.addEventListener('resize', updateInfo)
+  // 监听 iOS Safari 视口变化
+  if (window.visualViewport) {
+    window.visualViewport.addEventListener('resize', updateInfo)
+  }
 })
 
 onUnmounted(() => {
   window.removeEventListener('resize', updateInfo)
+  if (window.visualViewport) {
+    window.visualViewport.removeEventListener('resize', updateInfo)
+  }
 })
 
 const route = useRoute()
@@ -98,14 +112,27 @@ const handleTabClick = (path) => {
 
 <style scoped>
 .app-provider {
-  /* 关键：让 config-provider 本身先占满视口 */
-  height: 100%;
+  /* 使用准确的视口高度 CSS 变量 */
+  height: var(--vh, 100vh);
+  width: 100%;
 }
 
 .app-root {
   height: 100%;
+  width: 100%;
+  position: relative;
   border: 2px solid red;  /* 调试用红框 */
-  display: flex;
-  flex-direction: column;
+}
+
+/* TabBar 固定在底部 */
+:deep(.van-tabbar) {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding-bottom: 0 !important;
+  /* 移除可能的安全区域内边距 */
+  padding-bottom: constant(safe-area-inset-bottom) !important;
+  padding-bottom: env(safe-area-inset-bottom) !important;
 }
 </style>