适配Android与iOS的CSS修改问题：响应式页面字体显示异常

问题分析 #

你遇到的iOS端H1字体大小不生效、H1与H2尺寸无差异的问题，核心原因有两点：

1. 样式优先级冲突：.title-first-container的font-size直接覆盖了.first-container h1的设置，且小屏断点下H1和H2的字体尺寸被设为相同的1.5rem，不符合需求。
2. iOS响应式单位特殊处理：纯vw单位在iOS Safari中可能因系统文本自动缩放机制失效，且未明确禁用该行为。

另外当前代码未确保文本完全居中，元素间也缺少统一的最小间距控制。

解决方案 #

针对你的核心需求（iPhone12上H1>H2、文本居中、元素间保留最小间距），调整方案如下：

1. 修复字体尺寸与优先级

   • 直接在.title-first-container内为H1设置更大字体，用clamp()结合rem和vw实现响应式，同时添加-webkit-text-size-adjust: 100%禁用iOS文本自动缩放。
   • 降低H2的字体尺寸，明确H1>H2的层级关系。

2. 强制文本居中

   • 给标题、副标题、描述文本统一添加text-align: center，确保所有内容居中对齐。

3. 统一元素间距

   • 给.first-container-content设置Flex布局并添加gap属性，确保元素间保留最小间距，替代零散的padding设置。

修改后的代码 #

Style.css #

/* 全局禁用iOS文本自动缩放，避免字体异常 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.first-container {
  background-image: url("../../../assets/images/desktop/Img Head desktop.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  padding: 0 18rem;

  h1 {
    font-weight: 700;
  }

  p {
    font-size: 1.25vw;
    text-align: justify;
  }
}

.title-first-container {
  text-align: center;
  /* 用clamp实现响应式字体，确保H1始终大于H2 */
  h1 {
    font-size: clamp(1.8rem, 4vw, 3.5rem);
  }
}

.subtitle-first-container {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  text-align: center;
  margin-top: 1rem;
}

.description-first-container {
  padding: 1.5rem 0;
  text-align: center;
}

.first-container-button {
  background-color: #cc2c2c;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 15px 60px;
  font-size: 1.2rem;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .first-container {
    background-image: url("../../../assets/images/mobile/Img Head Mobile.png");
    align-items: center;
    padding: 0 2rem;

    button {
      width: 100%;
    }
  }

  .first-container-content {
    display: flex;
    flex-direction: column;
    gap: 1.2rem; /* 统一元素间最小间距 */
    width: 100%;
  }
}

@media screen and (max-width: 400px) {
  .first-container {
    padding: 0 1.5rem;

    button {
      padding: 8px 20px;
    }
  }

  .first-container-content {
    transform: translate(0, 30%);
  }
}

index.jsx #

<div className="first-container">
  <div className="first-container-content">
    <div className="title-first-container">
      <h1>Cuide do seu <span style={{ color: 'rgba(207, 57, 57,1)' }}>coração.</span></h1>
      <h1>Eu te ajudo!</h1>
    </div>
    <h2 className="subtitle-first-container">
      Dr. Maurício Medeiros <br />
      Cardiologista <br />
      CRMCE:9091 RQE:11103
    </h2>
    <p className="description-first-container">
      Médico Cardiologista, formado em 2003 pela <br />
      Universidade Federal do Ceará. Professor de <br />
      cardiologia da faculdade UNINTA. <br />
      Ecocardiografista pela Escola Pernambucana de <br />
      Ecocardiografia. Título de especialista pela <br />
      Sociedade Brasileira de Cardiologia (RQE 11103). <br />
      Proprietário e diretor clínico da CENTROCARDIO <br />
      SOBRAL, uma clinica especializada em <br />
      cardiologia na cidade de Sobral- Ceará.
    </p>
    <a href={linkButton} target="_blank" rel="noreferrer">
      <button className="first-container-button">Agendar consulta</button>
    </a>
  </div>
</div>

关键说明 #

• clamp(min, preferred, max)：让字体在不同屏幕尺寸下保持合理范围，兼顾响应式与兼容性。
• -webkit-text-size-adjust: 100%：禁用iOS Safari的自动文本缩放，避免字体大小异常。
• Flex布局的gap属性：统一控制元素间最小间距，比零散的margin/padding更易维护。

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