Files
label-designer/src/hooks/useIsMobile.ts
2026-06-12 19:34:27 +08:00

24 lines
687 B
TypeScript

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)');
}