iPad设备上CSS font-size与padding样式失效问题求助

问题背景 #

我编写了一个响应式网站并部署在Netlify平台，在Windows笔记本、安卓和iPhone设备上测试均表现正常，在笔记本端模拟iPad等平板设备尺寸时样式也完全符合预期，但实际在iPad设备上访问时CSS样式无法正常生效。

已尝试的解决方案 #

最初的代码中使用了CSS变量，我尝试移除变量后问题仍未解决，还先后尝试添加如下两段代码：

appearance: auto;
-moz-appearance: auto;
-webkit-appearance: auto;

以及

appearance: none;
-moz-appearance: none;
-webkit-appearance: none;

但故障依旧存在。

相关CSS代码 #

以下是我针对平板尺寸编写的专用CSS代码：

:root {
  font-size: 62.5%;
      
  --h1-size: calc(2rem + 3vw);
  --h2-size: clamp(2rem, calc(1.2rem + 2vw), 4rem);
  --h3-size: clamp(2rem, calc(1.2rem + 2vw), 3rem);
  --h4-size: clamp(1.65rem, calc(1rem + 1.5vw), 2rem);
  --p-size: clamp(1.5rem, calc(0.8rem + 1.5vw), 2rem);
}

/***************************** min-width: 750px *****************************/
@media screen and (min-width: 750px) {
  #welcome {
    background-position-x: 150%;
    background-position-y: 0%;
    background-size: 70%;

    padding-bottom: 8rem;
    padding-bottom: calc(2.5 * var(--h1-size));
  }
  .welcome-text {
    place-content: center;
    align-self: center;
    align-content: center;
    align-items: center;
    z-index: 2;

    padding: 1.6rem 0px 5px 3rem;
    margin-top: 2.4rem;

    padding: var(--p-size) 0px 5px var(--h1-size);
    margin-top: calc(0.8 * var(--h1-size));
    grid-column: 1/6;
  }

  .welcome-text h1 {
    font-family: var(--curlyFont);
    font-size: 6rem;
    font-size: clamp(4rem, 10vw, 10rem);
  }

  .welcome-text a {
    font-size: 16px;
  }

  .projects a * {
    max-width: 70%;
    margin: 7px auto;
  }

  .about-us-text {
    padding-bottom: 1.65rem;
    padding-bottom: var(--p-size);
  }

  hr {
    width: 7%;
  }

  #skills {
    padding-top: 3rem;
    padding-top: var(--h1-size);
  }

  #skills ul li {
    grid-column: span 6;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-items: center;
    text-align: center;

    margin: 2.4rem;
    margin: var(--h2-size);
  }

  #skills ul li img {
    max-width: 30%;
    width: 90px;
    justify-self: center;
    margin: var(--p-size) auto;
    object-fit: cover;
  }

  #skills ul li#design {
    grid-column: 1/13;

    justify-self: center;
  }

  #skills p.leading {
    font-size: 1.5rem;
    font-size: calc(var(--p-size) / 1.1);
    line-height: 1.6rem;
    line-height: var(--h4-size);
  }

  #contact {
    background-size: 34%;
    padding-top: 7rem;
    padding-bottom: 6rem;
    padding-top: calc(2 * var(--h1-size));
    padding-bottom: calc(1.8 * var(--h1-size));
  }
}

/***************************** min-width: 930px *****************************/
@media screen and (min-width: 930px) {
  .site-nav h2 {
    font-size: 3rem;
    font-size: var(--h3-size);
    padding-left: 4rem;
    padding-left: var(--h1-size);
  }

  #welcome {
    background-position-x: 120%;
    background-position-y: 30%;
    background-size: 60%;

    padding-bottom: calc(2 * var(--h1-size));
  }

  .welcome-text {
    place-content: center;
    align-self: center;
    align-content: center;
    align-items: center;
    z-index: 2;
    padding: 0 0px 5px calc(1.8 * var(--h1-size));
    grid-column: 1/6;
  }

  #about-us {
    padding-top: calc(var(--h1-size) * 1.5);
  }

  .about-us-img {
    padding-top: calc(var(--h1-size) * 1.2);
    padding-left: 0;
    grid-column: 2/7;
    grid-row: 1;
    justify-self: center;
    align-self: top;
  }
  .about-us-img img {
    max-width: 25vw;
    padding-top: calc(0.8 * var(--h1-size));
  }

  .about-us-text {
    padding-top: calc(1.5 * var(--h1-size));

    grid-column: 6/11;
    grid-row: 1;
    align-self: center;
    padding-right: 0;
    padding-left: calc(1.2 * var(--h1-size));
  }

  #contact {
    background-size: 30%;
  }
  #skills h3 {
    padding-bottom: calc(var(--h1-size) * 1.5);
  }
  #skills .leading {
    padding-top: calc(var(--h1-size) * 1.5);
  }

  #skills ul li {
    padding: 0;
    margin: 0;
  }

  #skills ul #copywriter {
    grid-column: 1/5;
    grid-row: 1;
    align-self: center;
    padding-top: 150px;
  }
  #skills ul #delivery {
    grid-column: 5/9;
    grid-row: 1;
    align-self: start;
  }

  #skills ul li#design {
    grid-column: 9/13;
    grid-row: 1;
    padding-top: 150px;
    justify-self: center;
    align-self: center;
  }

  #skills ul li img {
    max-width: 40%;
    width: 120px;
  }

  #contact ul.social-media-icons li.gmail,
  #contact ul.social-media-icons li.fb {
    grid-column: 4/8;
  }
}

具体故障表现 #

当前遇到的问题为padding和font-size样式异常：两类样式均停留在重置层级，font-size固定为10px，padding值为0。 #

核心诱因 #

该类问题绝大多数由viewport meta标签配置不当导致：
iPad的Safari浏览器默认会对没有正确配置viewport的页面进行缩放适配，同时Safari对min-width媒体查询的判定逻辑和桌面端模拟器存在差异：部分iPad型号的视口逻辑分辨率低于物理分辨率，若你未设置viewport的width=device-width，会导致浏览器认为页面视口宽度远大于实际宽度，进而无法触发你设置的min-width:750px、min-width:930px媒体查询规则，所有平板尺寸的专属样式都没有生效，自然会停留在默认的重置样式层级。

排查&修复步骤 #

1. 先检查HTML头部的viewport标签配置，确保配置如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

核心是必须加width=device-width，让浏览器的逻辑视口宽度和设备实际宽度对齐。
2. 若已经配置了viewport仍有问题，调整媒体查询规则，兼容Safari的判定逻辑：
将@media screen and (min-width: xxx)修改为@media only screen and (min-width: xxx)，添加only关键字规避旧版Safari对媒体查询规则的识别错误。
3. 若还存在问题，检查Safari的私有样式冲突：
部分旧版iOS Safari对clamp()、calc()结合CSS变量的解析存在bug，你可以先把媒体查询内的CSS变量替换为固定值测试，确认变量解析是否异常，若确实是变量解析问题，可以给变量添加回退值，比如padding-bottom: calc(2.5 * var(--h1-size, 4rem))，给变量指定默认值避免解析失败时样式丢失。

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