Why does the font size change on mobile due to content size?

W

wawa2017-10-09 19:31:07

css

wawa, 2017-10-09 19:31:07

I test in chrome in mobile mode (IPhone 6, Galaxy, yes any) and on a real Android 5 device.
As a result, in the first version there is one font, and in the second it is smaller, although the only difference is that the text has become less by 5 characters. How can this be explained and fixed?
one:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
      html {
        font-size: 48px;
        font-family: Arial, serif;
      }
    </style>
  </head>
  <body>text text text text text text text text text text text text text text text text text</body>
</html>

2:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
      html {
        font-size: 48px;
        font-family: Arial, serif;
      }
    </style>
  </head>
  <body>text text text text text text text text text text text text text text text text</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

S

Sergey delphinpro, 2017-10-09
@wawa

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

https://github.com/necolas/normalize.css/blob/mast...

M

Maxim Timofeev, 2017-10-09
@webinar

chrome in mobile mode is not a real device, it does not take into account a bunch of factors. I don’t know about apples, but an android device can be connected to a PC and watch its developer console to determine the cause.