From 32f097810809796a54f914d13b50b73bd0e11cc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8?= <frankyang0820@outlook.com>
Date: Fri, 12 Jun 2026 14:39:36 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                           |  15 ++--
 src/components/common/MobileScale.vue | 100 ++++++++++++++++++++++++++
 2 files changed, 107 insertions(+), 8 deletions(-)
 create mode 100644 src/components/common/MobileScale.vue

diff --git a/src/App.vue b/src/App.vue
index 3b141ad..c48f2f5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,20 @@
 <template>
-  <div class="app-container">
+  <MobileScale 
+    :design-width="1920" 
+    :min-scale="0.6"
+    :breakpoint="992"
+  >
     <TopLoading ref="topLoadingRef" />
     <KeepAlive>
       <router-view></router-view>
     </KeepAlive>
-  </div>
+  </MobileScale>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import TopLoading from '@/components/common/TopLoading.vue'
+import MobileScale from '@/components/common/MobileScale.vue'
 import { useTabsStore } from '@/stores/modules/tabs'
 
 const tabsStore = useTabsStore()
@@ -27,10 +32,4 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-.app-container {
-  width: 100%;
-  height: 100vh;
-  overflow: hidden;
-  position: relative;
-}
 </style>
diff --git a/src/components/common/MobileScale.vue b/src/components/common/MobileScale.vue
new file mode 100644
index 0000000..baf7ab1
--- /dev/null
+++ b/src/components/common/MobileScale.vue
@@ -0,0 +1,100 @@
+/**
+ * 移动端 viewport 缩放方案
+ * 
+ * 功能说明：
+ * 1. PC 端保持原有布局不变
+ * 2. 移动端通过动态调整 viewport scale 等比例缩放
+ * 3. 滚动功能正常工作
+ * 4. 有最小缩放值限制，防止内容过小
+ * 
+ * 使用方式：
+ * 在 App.vue 中引入并使用
+ */
+
+<template>
+  <div class="mobile-scale-wrapper">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * 移动端 viewport 缩放组件
+ * 
+ * 使用 viewport 缩放实现整体缩放，滚动功能正常工作
+ * 
+ * Props:
+ * - designWidth: 设计稿宽度，默认 1920
+ * - minScale: 最小缩放比例，默认 0.5
+ * - breakpoint: 移动端断点，默认 992
+ */
+const props = withDefaults(defineProps<{
+  designWidth?: number
+  minScale?: number
+  breakpoint?: number
+}>(), {
+  designWidth: 1920,
+  minScale: 0.5,
+  breakpoint: 992,
+})
+
+// 当前缩放比例
+const currentScale = ref(1)
+
+// 设置 viewport meta 标签
+const setViewportMeta = (scale: number) => {
+  const viewportMeta = document.querySelector('meta[name="viewport"]')
+  if (viewportMeta) {
+    viewportMeta.setAttribute(
+      'content',
+      `width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no`
+    )
+  }
+}
+
+// 计算缩放比例
+const calculateScale = () => {
+  const windowWidth = window.innerWidth
+  
+  if (windowWidth >= props.breakpoint) {
+    // PC 端：恢复默认 viewport
+    currentScale.value = 1
+    setViewportMeta(1)
+    return
+  }
+  
+  // 计算缩放比例：屏幕宽度 / 设计稿宽度
+  let calculatedScale = windowWidth / props.designWidth
+  
+  // 限制最小缩放比例
+  calculatedScale = Math.max(props.minScale, calculatedScale)
+  
+  currentScale.value = calculatedScale
+  setViewportMeta(calculatedScale)
+}
+
+// 监听窗口大小变化
+const handleResize = () => {
+  calculateScale()
+}
+
+onMounted(() => {
+  calculateScale()
+  window.addEventListener('resize', handleResize)
+  window.addEventListener('orientationchange', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  window.removeEventListener('orientationchange', handleResize)
+  // 组件销毁时恢复默认 viewport
+  setViewportMeta(1)
+})
+</script>
+
+<style scoped lang="scss">
+.mobile-scale-wrapper {
+  width: 100%;
+  height: 100%;
+}
+</style>