android - 为什么移动版 Chrome 中的段落文本会缩小？

Question

问题出现在 Chrome/Android 和其他移动设备上的 Chrome 上。到目前为止，我只能在 Nexus 5x 上对其进行测试。我正在使用 Handlebars.js 在段落标签内动态显示引号。只要显示的引用少于 三 行，字体大小就会缩小。我很难调试这个字体大小问题，因为它似乎只发生在 Chrome for Mobile 上。该问题不会在 Chrome 开发工具响应模式中重现。字体大小调整不会在 IOS Safari 或 Firefox Mobile 中发生。

如果您在移动设备上安装了 Chrome，请您试玩一下游戏，看看您是否注意到问题？ LINK HERE

这里有两张并排的图片来说明问题。左图字体比右图字体大:

这是该网站部分的代码 (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>

有没有人知道是什么导致了这种字体大小调整？

如果您能提供任何帮助，请提前感谢。

Link to Repository

编辑:感谢所有帮助过我的人!

Answer 1

为了我的网页的交叉兼容性，我倾向于使用以下内容:

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

这似乎在移动平台所需的 CSS 没有额外样式的情况下工作。不知道是不是你想要的。