init commit

src/hooks/useIsMobile.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia(query).matches;
+  });
+
+  useEffect(() => {
+    const mql = window.matchMedia(query);
+    const onChange = () => setMatches(mql.matches);
+    onChange();
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  }, [query]);
+
+  return matches;
+}
+
+/** 与 Tailwind `md` 断点一致：< 768px 视为移动端 */
+export function useIsMobile(): boolean {
+  return useMediaQuery('(max-width: 767px)');
+}