Blame view

天文台pc/tianwentai-ui/src/app/components/ui/use-mobile.ts 585 Bytes
bc518174   王天杨   提交两个项目文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  import * as React from "react";
  
  const MOBILE_BREAKPOINT = 768;
  
  export function useIsMobile() {
    const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
      undefined,
    );
  
    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;
  }