style: judge移动端

src/utils/flexible.js

@@ -32,7 +32,7 @@ let flexible = (designWidth, maxWidth, minWidth) => {
     } else {
       designWidth = 750
     }
-    console.log(width, designWidth)
+    // console.log(width, designWidth)
 
     // var rem = width * 10 / designWidth;
     var rem = Math.round((width * 10) / designWidth)

src/utils/isMobile.ts

@@ -1,34 +1,54 @@
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue'
 
 export const useIsMobile = () => {
   const isMobile = ref(false)
 
+  let resizeTimer: ReturnType<typeof setTimeout> | null = null
+
   const checkDevice = () => {
-    // 1. 现代 Client Hints API（Chrome/Edge 最准）
-    if (navigator.userAgentData?.mobile !== undefined) {
-      isMobile.value = navigator.userAgentData.mobile
-      return
+    // 使用防抖避免频繁触发
+    if (resizeTimer) {
+      clearTimeout(resizeTimer)
     }
+    resizeTimer = setTimeout(() => {
+      // 1. 现代 Client Hints API（Chrome/Edge 最准）
+      // if (navigator.userAgentData?.mobile !== undefined) {
+      //   isMobile.value = navigator.userAgentData.mobile
+      //   console.log('使用 userAgentData:', isMobile.value)
+      // }
+      // 2. 综合判断（兼容所有浏览器）
+      const ua = navigator.userAgent.toLowerCase()
+      const mobileRegex = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i
 
-    // 2. 综合判断（兼容所有浏览器）
-    const ua = navigator.userAgent.toLowerCase()
-    const mobileRegex = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i
+      const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 1
+      const smallScreen = window.innerWidth <= 1200 // 你可以改成 1024 等
 
-    const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 1
-    const smallScreen = window.innerWidth <= 768 // 你可以改成 1024 等
+      const uaCheck = mobileRegex.test(ua)
+      isMobile.value = uaCheck || smallScreen
+    }, 100)
+  }
 
-    isMobile.value = mobileRegex.test(ua) || (hasTouch && smallScreen)
+  const handleResize = () => {
+    checkDevice()
   }
 
   onMounted(() => {
     checkDevice()
-    window.addEventListener('resize', checkDevice)
+    window.addEventListener('resize', handleResize)
     window.addEventListener('orientationchange', checkDevice) // 手机旋转必备
   })
 
   onUnmounted(() => {
-    window.removeEventListener('resize', checkDevice)
+    window.removeEventListener('resize', handleResize)
     window.removeEventListener('orientationchange', checkDevice)
+    if (resizeTimer) {
+      clearTimeout(resizeTimer)
+    }
+  })
+
+  // 处理 keep-alive 缓存的组件重新激活场景
+  onActivated(() => {
+    checkDevice()
   })
 
   return { isMobile }