Files
xingrin/frontend/hooks/use-mobile.ts
2025-12-12 18:04:57 +08:00

21 lines
618 B
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import * as React from "react"
const MOBILE_BREAKPOINT = 768
export function useIsMobile() {
// 初始值设为 false确保 SSR 和客户端初始渲染一致
const [isMobile, setIsMobile] = React.useState<boolean>(false)
React.useEffect(() => {
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
const onChange = () => {
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
}
mql.addEventListener("change", onChange)
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
return () => mql.removeEventListener("change", onChange)
}, [])
return isMobile
}