phpandroidgoogle-chromesize

Chrome Android scales text size from the third paragraph

I have a problem with Chrome Android and it is that it greatly scales the size of the text starting from the third paragraph without respecting the indicated font size (px, em, rem, %, etc.). It only happens with Chrome android and browsers based on it, in the desktop version of Chrome and in the rest of the browsers the font size is maintained or scales very little. Example:

Code for more than 2 rows:

<html>
<body style="background-color:black;">
  <div style="color:white; font-size:50px;">
      <p>Selected text size: 50px. More than 2 rows. More than 2 rows. More than 2 rows. More than 2 rows. More than 2 rows. More than 2 rows. More than 2 rows. More than 2 rows. More than 2 rows. More than 2 rows. More than 2 rows.</p>   
  </div>
</body>
</html>

Code for less than 3 rows:

<html>
<body style="background-color:black;">
  <div style="color:white; font-size:50px;">
      <p>Selected text size: 50px. Less than 3 rows.</p>   
  </div>
</body>
</html>

enter image description here

For great clarity I hosted the code for both options here:

More than 2 rows: https://ra2ven27.github.io/Prueba/index.html

Less then 3 rows: https://ra2ven27.github.io/Prueba/index2.html

To see the differences must be accessed through chrome android.

Solution

  • I tried your source code on my own site. Adding <meta name="viewport" content="width=device-width, initial-scale=1"> to the <head> section makes the text sizing constant, regardless of the lines. By the way, including this in the html head is pretty much the most fundamental thing you need to do when developing a site with mobile users in mind. This line tells the browser the basic scaling of the site.

    This link from mdn web docs pretty well describes why it works that way.