NextJS网站添加viewport元标签后iPhone端媒体查询仍失效求助

以下是针对问题的几个排查和解决方向：

• 确认viewport标签是否正确渲染
  在iPhone Safari中打开页面后，通过Safari开发者工具（需在iPhone设置- Safari-高级中开启“Web检查器”，再连接Mac的Safari调试）查看页面源码的<head>部分，确认你添加的viewport标签确实存在，且内容为：

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

  若页面存在多个viewport标签，可能引发冲突，需确保仅有这一个生效。

• 简化媒体查询测试触发逻辑
  先暂时移除max-height条件，仅保留max-width查询，测试是否能触发：

  @media (max-width: 1200px) {
    body {
      background-color: lightblue; /* 用固定颜色替代CSS变量，排除变量定义问题 */
    }
  }
  

  若简化后的查询生效，说明原查询中max-height条件在你的iPhone场景下未满足（比如竖屏时iPhone的逻辑高度通常大于700px）；若仍不生效，继续排查其他问题。

• 排查CSS变量与样式优先级
  确保--lightBlue变量已在全局定义（比如在:root选择器中），示例：

  :root {
    --lightBlue: #add8e6;
  }
  

  同时检查是否有更高优先级的样式（如内联样式、ID选择器样式）覆盖了媒体查询中的body背景色，可通过Safari开发者工具查看body元素的“样式”面板，确认媒体查询规则是否被标记为生效状态。

• 添加Safari兼容的媒体查询前缀
  尝试给媒体查询加上only screen前缀，明确针对屏幕设备，避免Safari解析异常：

  @media only screen and (max-width: 1200px), only screen and (max-height: 700px) {
    body {
      background-color: var(--lightBlue);
    }
  }
  

• 检查NextJS的CSS加载配置
  若使用全局CSS文件，确保已在_app.tsx中正确导入（比如import '../styles/globals.css'）；若使用CSS Modules，需确认类名引用方式正确，无样式隔离导致的问题。另外可尝试构建生产版本后测试，排除开发环境热加载异常。

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