Why is paragraph text shrinking in Chrome for Mobile?

Question

The problem is happening on Chrome/Android and possibly Chrome on other mobile devices. I have only been able to test it on a Nexus 5x so far. I am using Handlebars.js to dynamically display quotes inside paragraph tags. Whenever the displayed quote is less than three lines, the font-size shrinks. I am having a difficult time debugging this font sizing issue because it only seems to be happening on Chrome for Mobile. The issue does not replicate in Chrome dev tools responsive mode. The font resizing does not happen in IOS Safari or Firefox Mobile.

If you have Chrome on a mobile device would you please have a run through of the game and see if you notice the issue? LINK HERE

Here are two pictures side-by-side that illustrate the problem. Font in left picture is bigger than font in right picture:

Here is the code for that section of the site (link to repository):

#game-screen {
  margin-top: 2%;
  @media (max-width: 550px) {
    margin-top: 4%;
  }
  #game-quotes {
    width: 90%;
    margin: 0 auto;
    @media (max-width: 550px) {
      width: 95%;
    }
    p {
      font-size: 3.6rem;
      @media (max-width: 750px) {
        font-size: 2.4rem;
      }
      @media (max-width: 550px) {
        font-size: 1.4rem;
      }
    }
  }
}

<div id="game-screen">
  <div id="game-pictures">
  </div>
  <div id="game-quotes">
    <h6 class="center">Quote {{counter}}/10</h6>
    <p>"{{content}}"</p>
  </div>
</div>

Does anyone have an idea of what might be causing this font-resizing?

Thanks in advance if you can offer any help.

Link to Repository

Edit: Thanks to all of you who helped me!

Answer 1

For cross compatibility for my web pages I tend to use the following:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This seems to work with no additional styling with CSS needed for the mobile platforms. Not sure if it what you want though.

Answer 2

Can you check if your Chrome font size is at 100% in settings on your phone? Chrome for Android has an option to render font at a different value. You can find this option in: Menu -> Settings -> Accessibility. I did a mistake like this some weeks ago and I want to be sure that is not the case here. Sorry if I'm out of the line here.

I also found that for some unknown reason sometimes Chrome for Android set this font setting wrong at installation time. I could not replicate this behavior but I got one phone, of a relative, with this so it might be possible that you are not aware of the fact that this setting is not set at 100%.