Question

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

。

如果您在移动设备上安装了Chrome，请先试试游戏，看看是否发现了问题？ LINK HERE

以下是显示字体大小更改的视频：video of problem

以下两张图片并排显示了问题。左图中的字体比右图中的字体大：

以下是网站该部分的代码（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

您可以检查手机设置中的Chrome字体大小是否为100％？ Chrome for Android可以选择以不同的值呈现字体。您可以在以下菜单中找到此选项：菜单 - ＆gt;设置 - ＆gt;可访问性。几周前我犯了这样的错误，我想确定这不是这种情况。对不起，如果我不在这里。

我还发现，由于某些未知原因，Chrome for Android会在安装时将此字体设置设置为错误。我无法复制这种行为，但我有一部手机，一个亲戚，这样就有可能你不知道这个设置没有设置为100％。

Answer 2

我在段落选择器后面添加了*以选择所有段落。也许这会解决你的问题。请告诉我它是否有效，我想知道结果：）

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

Answer 3

我不确定这是否是您问题的答案，但我发现这与CSS一致：

body {
    /** Setting the 'font-size' property of the <body> to 62.5%
     *   allows you to use the 'em' measurement as you would in 'px' form.
     *   ...hope that's clear.
    */
    font-size: 62.5%;
}

#someDivInBody {
    font-size: 1.65em; /* or '16.5px' by CSS */
}

此方法允许我像em中一样使用px测量，但具有更高的一致性和控制力。

Answer 4

rem单位与px或em不同。调整窗口大小时，使用rem将保持文本与窗口大小的比例相同。尝试使用em或px来解决问题：）

Answer 5

这可能是因为手机或平板电脑的分辨率。无论设备如何，最好自定义您的网页以保持相同的大小。

尝试使用max-width: 解决方案 ;

您必须将此应用于body类才能应用于所有内容。

即。

`.body {`<br>
`    max-width: 3840px;` /*4K resolution, for 4K displays*/

应该修复文字问题。如果没有，请参阅https://www.w3schools.com或https://developer.mozilla.org/en-US/。它可以帮助你。

Answer 6

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

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

这似乎无法使用移动平台所需的CSS的其他样式。不确定它是否是你想要的。

Answer 7

为我的 React 应用程序修复此问题的唯一方法是使用此 CSS 规则：

* {
  max-height: 999999px;
}

我不知道为什么会这样。

这是我在使用三星 Note 8 时遇到的一个非常具体的问题，没有其他任何工作。我还尝试了不同的元标记组合和所有可能的 text-size-adjust 值，但没有任何效果。

希望这能帮助别人跳进我刚出来的兔子洞。

Answer 8

我也遇到过同样的问题，这很烦人。我为Chrome提交了一个错误（请参见此处的详细信息：https://bugs.chromium.org/p/chromium/issues/detail?id=877833#c9），他们基本上说，对其进行修复不值得。就我而言，如@Cheesy所建议，我的android的可访问性已设置为大于标准字体大小。 IMO不会使该问题无效。如果大字体使所有字体变大。但是，不应在忽略页面上某些位置的同时不一致地调整字体大小。

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

8 个答案: