feat: 移动端适配工具函数

src/utils/flexible.js

@@ -30,7 +30,7 @@ let flexible = (designWidth, maxWidth, minWidth) => {
       width < minWidth && (width = minWidth)
       designWidth = oldDesignWidth
     } else {
-      designWidth = 393
+      designWidth = 750
     }
     console.log(width, designWidth)
 

src/utils/isMobile.ts

@@ -0,0 +1,35 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export const useIsMobile = () => {
+  const isMobile = ref(false)
+
+  const checkDevice = () => {
+    // 1. 现代 Client Hints API（Chrome/Edge 最准）
+    if (navigator.userAgentData?.mobile !== undefined) {
+      isMobile.value = navigator.userAgentData.mobile
+      return
+    }
+
+    // 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 <= 768 // 你可以改成 1024 等
+
+    isMobile.value = mobileRegex.test(ua) || (hasTouch && smallScreen)
+  }
+
+  onMounted(() => {
+    checkDevice()
+    window.addEventListener('resize', checkDevice)
+    window.addEventListener('orientationchange', checkDevice) // 手机旋转必备
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', checkDevice)
+    window.removeEventListener('orientationchange', checkDevice)
+  })
+
+  return { isMobile }
+}