Search code examples
cssmobile-safarifont-size

Why does the font-size change for container bigger than 50%?

This is a little test page. On the desktop it looks normal to me.

<html>

<head>
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <style type="text/css">
    div {
      background: green;
      font-size: 15px;
    }
  </style>
</head>

<body>
  <div style="width:10%">10%</div>
  <div style="width:20%">20%</div>
  <div style="width:30%">30%</div>
  <div style="width:40%">40%</div>
  <div style="width:50%">50%</div>
  <div style="width:60%">60%</div>
  <div style="width:70%">70%</div>
  <div style="width:80%">80%</div>
  <div style="width:90%">90%</div>
  <div style="width:100%">100%</div>
</body>

</html>

But on my iPhone it has a strange behavior. In portrait mode everything is ok. But in landscape mode the browser calculates different font sizes although they are all set to 15px. Is there something I don't understand about font-size? I need them to look all the same.

View from Safari on iPhone

Same thing happens on firefox, edge and chrome

Solution

  • I looked on the apple.com web page to see if they have the same issue. And they don't.

    They use

    -webkit-text-size-adjust: 100%;

    and then the font size is everywhere the same.