htmlcssfont-sizeviewport-units

font size is not constant across viewports

see it in action

I set font size of h1 to 1.2rem (i.e 19 px) , so it must be 19px across all sizes . when i resize or reduce the browser width the font stays the same 19px . but when i click on device toggle and view as a mobile then fonts reduces rapidly . why is it happening ? why does it change in mobile view ?

code below

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .main h1 {
        font-size: 1.2rem;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus
        laboriosam explicabo voluptates. Optio officiis suscipit deserunt vitae
        pariatur, laborum quae soluta quos hic, beatae quam, fugiat laboriosam
        nisi? Magnam, ut!
      </h1>
      <p>
        recusandae libero voluptatibus vero, pariatur repellendus inventore
        distinctio perspiciatis impedit enim iure. Lorem ipsum dolor, sit amet
        consectetur adipisicing elit. Mollitia repellat maiores est amet minus
        laboriosam excepturi molestiae cumque
      </p>
    </div>
  </body>
</html>

you can take a look at medium website , its font is same 15px when inspected with mobile view too . this is not the case with my demo . what is causing this behavior ? enter image description here

Solution

  • why didn't I think of that before? your code is actually working without any problem I just confirmed it the font-size is the same at all screen sizes what's happening is simple.

    you have different screen sizes which mean different pixels sizes at the screen.

    So the font-size is shrinking and expanding according to the screen size. You may see it small but it is most definitely an 18px at all screen sizes nothing is being changed.

    You can use the developer tools to confirm it. Just select the element using the select tool and it will show the details. Such as font-size color font-family and so on

    result

    result2

    result3

    You can always test it on a physical device to check that and confirms it.

    Also if the font-size is small use the @media query to make it bigger at smaller devices. But as goes to your question. You don't actually have any problem.

    Edit

    as I said before buddy you don't have a problem check this gif out and you will understand.

    result4