| 1 | /** |
| 2 | * useIsMobile Hook |
| 3 | * |
| 4 | * 功能描述: 检测当前设备是否为移动端（屏幕宽度 < 768px） |
| 5 | * 用于移动端适配，如禁用拖拽、切换弹窗类型等 |
| 6 | */ |
| 7 | import { useEffect, useState } from 'react' |
| 8 | |
| 9 | /** |
| 10 | * 检测当前是否为移动端设备 |
| 11 | * @returns boolean - true 表示移动端，false 表示桌面端 |
| 12 | */ |
| 13 | export function useIsMobile() { |
| 14 | const [isMobile, setIsMobile] = useState(false) |
| 15 | |
| 16 | useEffect(() => { |
| 17 | // SSR 安全检查 |
| 18 | if (typeof window === 'undefined') |
| 19 | return |
| 20 | |
| 21 | const mediaQuery = window.matchMedia('(max-width: 767px)') |
| 22 | |
| 23 | // 设置初始值 |
| 24 | setIsMobile(mediaQuery.matches) |
| 25 | |
| 26 | // 监听变化 |
| 27 | const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches) |
| 28 | mediaQuery.addEventListener('change', handler) |
| 29 | |
| 30 | return () => mediaQuery.removeEventListener('change', handler) |
| 31 | }, []) |
| 32 | |
| 33 | return isMobile |
| 34 | } |
| 35 |