React.js中react-responsive的useMediaQuery始终返回false原因

• 优先排查SSR/SSG渲染适配问题
  如果你使用Next.js、Remix、Gatsby等带服务端渲染能力的框架，服务端执行时不存在window对象，useMediaQuery默认初始返回值为false，如果没有做水合适配，客户端挂载后不会自动更新为正确值。
  两种修复方式：
  1. 调用钩子时传入SSR适配配置，指定服务端默认值，等待客户端水合后同步真实结果：

  const isDesktopOrLaptop = useMediaQuery(
    { query: '(min-width: 1440px)' },
    undefined,
    { ssr: true } // 开启SSR适配
  )
  

  2. 将用到媒体查询的组件设置为仅客户端渲染，比如Next.js中使用dynamic导入时配置ssr: false，避免钩子在服务端执行。
• 检查页面视口meta标签配置
  打开浏览器开发者工具，查看head标签内是否存在视口配置标签：

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  

  如果缺失该标签，媒体查询匹配的是默认虚拟布局视口，而非设备实际宽度，会导致所有宽度断点匹配异常。
• 校验版本兼容问题
  你提到去年使用时功能正常，先确认当前安装的react-responsive版本：v9及以上版本对部分API传参规则做了不兼容更新，旧写法可能无法被正确识别。可以先删除node_modules和包锁文件，回退到之前验证过可用的稳定版本（比如v8.2.0）重新安装，确认是否为版本升级导致的异常。
• 排查环境mock与浏览器本身问题
  打开浏览器控制台，手动执行以下命令验证原生matchMedia能力是否正常：

  window.matchMedia('(min-width: 1440px)').matches
  

  • 如果手动执行返回值也为false，检查当前浏览器窗口实际宽度、页面缩放比例，确认是否真的满足断点条件
  • 如果手动执行返回值正常，但钩子返回始终为false，检查项目中是否存在全局mockwindow.matchMedia的代码（比如单测配置、全局polyfill），这类mock如果错误注入到运行环境，会固定返回false覆盖原生实现
• 检查组件渲染逻辑
  确认你使用媒体查询返回值做判断的逻辑，是写在组件的渲染流中、能跟随state更新触发重渲染，而非在挂载前的闭包中缓存了初始false值，导致后续状态更新没有被捕获。

内容的提问来源于stack exchange，提问作者StormyTalent