仅在首次加载或刷新时，网站才会像移动设备上的桌面一样呈现答案

【问题标题】：Website renders like desktop on mobile, only when first loaded or is refreshed仅在首次加载或刷新时，网站才会像移动设备上的桌面一样呈现
【发布时间】：2022-02-08 21:24:58
【问题描述】：

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

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

在移动设备上打开时，此链接似乎没有响应。但是点击推荐并返回，主页现在是响应式的。如果我重新加载，移动网站会再次中断。

我使用了 Next.js 和 Chakra UI。

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

【问题讨论】：

您尝试过什么解决问题的方法？你被困在哪里了？
This is my viewport in _app,js <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" /> 我在网上看到的大多数类似问题都是因为这个标签，但我添加了它，它仍然不起作用。 nextjs 或 chakraUI 文档中没有关于此错误的任何信息。我之前也没有遇到过完全相同的问题
我也觉得这很奇怪，因为我的网站是响应式的，但只有当我按照上述步骤操作时（导航到另一个页面并返回）
虽然提供代码链接很好，但您的问题应该是独立的，最好不要依赖外部资源来回答。请在问题中添加相关代码。
请提供足够的代码，以便其他人更好地理解或重现问题。

标签： responsive-design next.js media-queries mobile-website chakra-ui

【解决方案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;

【讨论】：