h1 thick on iphone 11

Question

I have a problem where h1 text is very thick on my friends iphone 11 on every browser(safari,google,chrome,firefox). Every android/windows device and Ipad I tried doesn't have this problem. https://i.stack.imgur.com/Qtwl4.jpg

<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

Surely the problem is how you set the font-size to be 4vh (meaning 4% relative to the viewport of your friend's phone). Read up on how view height works. Try to use "px" values instead of vh. Example 22px

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