React项目部署至Vercel后Media queries失效问题求助

以下是几个常见的排查和解决方法：

• 添加viewport元标签
  这是最常见的触发原因。iPhone默认会以虚拟视口（通常为980px宽度）渲染网页，导致你的768px媒体查询无法被触发。需要在项目的public/index.html的<head>中添加：

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

  该标签会告知浏览器使用设备实际宽度作为视口宽度，确保媒体查询按预期生效。

• 检查CSS优先级（特异性）
  确认媒体查询内的样式选择器具有足够优先级，不会被全局样式覆盖。例如，如果全局样式有：

  .navbar {
    padding: 20px;
  }
  

  媒体查询内的样式需要使用相同或更高特异性的选择器：

  @media screen and (max-width: 768px) {
    .navbar { /* 相同选择器，优先级一致 */
      padding: 10px;
    }
  }
  

  若全局样式使用了更具体的选择器（如body .navbar），媒体查询内也要对应提升特异性。

• 清除浏览器缓存
  Vercel部署后，iPhone的Safari可能缓存了旧的CSS文件。尝试强制刷新：打开Safari，长按底部的刷新按钮，选择「重新加载并清除缓存」。

• 验证部署后的CSS代码
  使用Safari开发者工具检查实际生效的CSS：

  1. 在iPhone的「设置」→「Safari浏览器」→「高级」中开启「Web检查器」
  2. 将iPhone连接到Mac，打开Mac上的Safari，在「开发」菜单中选择你的设备和对应网页
  3. 查看「样式」面板，确认媒体查询代码是否存在，以及是否被划掉（表示被其他样式覆盖）

• 检查构建过程是否破坏CSS
  少数情况下，项目的构建工具（如Webpack、Vite）可能在压缩或处理CSS时损坏了媒体查询。可以直接访问部署后的CSS文件（通过浏览器开发者工具的「网络」面板找到对应资源），查看媒体查询代码是否完整。

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