为什么Chrome for Mobile中的段落文字会缩小？

Question

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

如果您在移动设备上安装了Chrome,那么您是否可以浏览游戏并查看是否发现了问题？链接在这里

这是一个显示字体大小变化的视频:问题视频

这是两张并排的图片,用于说明问题.左图中的字体比右图中的字体大:

以下是该站点该部分的代码(链接到存储库):

#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>

有没有人知道可能导致这种字体大小调整的原因？

如果您能提供任何帮助,请提前致谢

链接到存储库

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

Answer 1

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

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

这似乎适用于移动平台所需的 CSS 没有额外的样式。不确定它是否是你想要的。

Answer 2

您能否检查一下手机设置中的 Chrome 字体大小是否为 100%？Android 版 Chrome 可以选择以不同的值渲染字体。您可以在以下位置找到此选项：菜单 -> 设置 -> 辅助功能。几周前我犯了这样的错误，我想确定这里的情况并非如此。抱歉，如果我超出了这里的范围。

我还发现，出于某种未知的原因，有时 Android 版 Chrome 在安装时会错误地设置此字体设置。我无法复制此行为，但我有一部亲戚的手机，因此您可能不知道此设置未设置为 100%。