网站在移动设备上呈现为桌面，仅在首次加载或刷新时

Question

我创建了一个网站，该网站使用媒体查询并且在从浏览器中的开发工具进行测试时响应迅速。但是，它会在重新加载时恢复到类似桌面的状态。如果我单击 link 将我重定向到另一个页面，它会按预期完美显示第二页。当我“返回”时也是如此。主页现在具有神奇的响应能力。

[查看问题：]https://reach-tech-interns-page1.vercel.app/

在移动设备上打开后，link 似乎没有响应。但是点击推荐并返回，主页现在是响应式的。如果我重新加载，移动网站又会崩溃。

我用了Next.js和脉轮UI。

[Github代码：]https://github.com/inferno080/Reach-Tech-Interns-Page

Answer 1

问题出在 Chakra UI 的 useMediaQuery() 挂钩上。编写自定义挂钩解决了这个问题

const useMediaQuery = (query) => {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => setMatches(media.matches);
    window.addEventListener("resize", listener);
    return () => window.removeEventListener("resize", listener);
  }, [matches, query]);

  return matches;
}

export default useMediaQuery;