React 18生产环境下媒体查询失效问题求助

开发环境中媒体查询可正常工作，但部署到Netlify的React 18项目生产环境后，针对字体大小的媒体查询在iPhone 13真机上无响应。已添加正确的viewport元标签，CSS媒体查询层级符合规范，Chrome开发者工具中显示效果符合预期，但真机上媒体查询未生效。

HTML元标签 #

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

CSS媒体查询代码 #

/* ////////////////// */
/* ! MEDIA QUERIES XS DEVICES */
/* ////////////////// */

@media (max-width: 380px) {
  .include span {
    word-spacing: 6px;
    font-size: 1.1rem;
  }

  .medium-contianer {
    font-size: 0.9rem;
  }
}
@media (max-width: 370px) {
  .medium-contianer,
  .strength,
  .bar-container {
    margin: 0 0.35rem;
    font-size: 0.85rem;
  }
}
@media (max-width: 330px) {
  .include span {
    word-spacing: 4px;
    font-size: 0.9rem;
  }
}

@media (max-width: 320px) {
  .medium-contianer,
  .strength,
  .bar-container {
    margin: 0 0.35rem;
    font-size: 0.75rem;
  }

  .include span {
    word-spacing: 4px;
    font-size: 0.8rem;
  }
}

@media (max-width: 300px) {
  .medium-contianer,
  .strength,
  .bar-container {
    margin: 0 0.1rem;
    font-size: 0.7rem;
  }

  .include span {
    word-spacing: 4px;
    font-size: 0.8rem;
  }
}

/* ////////////////// */
/* ! MEDIA QUERIES TABLET DEVICES */
/* ////////////////// */

@media (min-width: 550px) {
  .main-container {
    width: 80vw;
    margin: 2rem auto;
  }
}

/* ////////////////// */
/* ! MEDIA QUERIES DESKTOP DEVICES */
/* ////////////////// */

@media (min-width: 768px) {
  .medium-contianer,
  .strength,
  .include span {
    font-size: 1.35rem;
  }
}

@media (min-width: 900px) {
  .main-container {
    width: 50vw;
    margin: 2rem auto;
  }

  .strength-container {
    height: 2rem;
  }
}

@media (min-width: 1700px) {
  .main-container {
    width: 25vw;
    margin: 50rem auto;
    transform: scale(2);
  }
}

效果对比 #

• Chrome开发者工具显示效果
• iPhone 13真机显示效果

相关地址 #

• 仓库地址：https://github.com/cassius2828/password-generator/tree/main/src
• 部署地址：https://password-generator-creynolds.netlify.app/

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