0

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;
}
ptm.rankzy
  • 21
  • 2
  • Please provide a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example). You have to clarify which font you're using and how you've loaded the font (via `@font-face`, external source like google fonts etc.) – herrstrietzel Oct 21 '22 at 19:22

1 Answers1

0

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

Pedro Ribeiro
  • 56
  • 6