h1在iPhone11上的厚度

Question

我遇到了一个问题，在我的朋友iPhone11上，每个浏览器(safari，google，chrome，firefox)上的h1文本都很厚。我尝试过的每一个android/windows设备和Ipad都没有这个问题。https://imgur.com/a/GrfhWZs

<div id="pageName">
  <h1>home</h1>
</div>

#pageName{
  display: inline-block;
  width: fit-content;
  vertical-align: top;
  height: 5.5vh;
  line-height: 5.5vh;
}
#pageName h1{
  margin: auto auto;
  vertical-align: middle;
  font-size: 4vh;
  color: #d45500;
  -webkit-font-smoothing: antialiased;
}

Answer 1

当然，问题是如何将字体大小设置为4vh (相对于朋友手机的视口而言，这意味着4% )。阅读视图高度是如何工作的。尝试使用"px“值而不是vh。示例22px

https://www.w3schools.com/cssref/css_units.asp