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

【问题标题】：Why is paragraph text shrinking in Chrome for Mobile?为什么移动版 Chrome 中的段落文本会缩小？
【发布时间】：2018-03-12 12:45:06
【问题描述】：

问题出现在 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

编辑：感谢所有帮助过我的人！

【问题讨论】：

有趣的一个。您是否尝试过使用其他单位的字体大小？ px 例如？
我查看了您的网站，但无法指出问题所在。你能以更好的方式清除它吗？
@Morpheus: px 还在做同样的事情，肯定有其他的 css 导致了这种情况，但为什么只在 chrome mobile 上？
可能是小数字体大小在不同时间的计算方式不同？在开发工具中，我的字体大小始终报告为 16.8px。在您的屏幕截图中，小写 n 的一个高度为 8px，另一个高度为 9px，包括锯齿。对我来说，对我来说，在渲染时，一个接一个的感觉很像一个舍入错误/决定。
您能否在手机设置中检查您的 Chrome 字体大小是否为 100%？ Chrome for Android 可以选择以不同的值呈现字体。您可以在以下位置找到此选项：菜单 -> 设置 -> 辅助功能。几周前我犯了这样的错误，我想确定这里不是这种情况。对不起，如果我不在此列。

标签： android html css google-chrome responsive-design

【解决方案1】：

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

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

【讨论】：

这没有任何效果。您能否在移动 Chrome 上重现该问题？
i added a * after your paragraph selector to selects all the paragraph's.... 这不是 * 的作用。 css-tricks.com/almanac/selectors/u/universal

【解决方案2】：

我不确定这是否是您问题的答案，但我发现这与 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 */
}

这种方法让我可以像在px 中一样使用em 测量，但具有更高的一致性和可控性。

【讨论】：

【解决方案3】：

rem 单元不同于px 或em。当您调整窗口大小时，使用rem 将保持文本的比例和窗口大小相同。尝试使用em 或px 来解决问题:)

【讨论】：

但是窗口没有被调整大小，所以字体大小也不应该改变。我尝试使用 px 和 em，并没有解决问题。这很令人沮丧，因为调整大小不会发生在开发工具中，所以我无法找到它的根源。

【解决方案4】：

这可能与手机或平板电脑的分辨率有关。无论使用何种设备，最好自定义您的网页以保持相同的大小。

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

你必须将它应用到 body 类才能应用到所有东西。

IE

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

这应该修复文本问题。如果没有，请参考https://www.w3schools.com 或https://developer.mozilla.org/en-US/。或许能帮到你。

【讨论】：

MDN 远远优于 w3schools。
@meagar 我已经编辑了我的帖子以包含这个网站

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

似乎是唯一不是黑客的解决方案。

【解决方案7】：

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

【讨论】：

【解决方案8】：

为我的 React 应用程序解决这个问题的唯一方法是使用这个 CSS 规则：

* {
  max-height: 999999px;
}

我不知道为什么会这样。

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

希望这可以帮助某人潜入我刚出来的这个兔子洞。

【讨论】：

谢谢。您是在 Chrome 中遇到此问题的吗？
@Arad 很高兴它对您有所帮助；由于未知原因，它发生在我特定设备的 Chrome 中，如果我没记错的话，它也发生在 Firefox 中。
知道了，谢谢。这是唯一对我有用的解决方案。其他几个答案说包括元视口标签也必须解决这个问题。但我已经有了它，它似乎并没有为我禁用字体增强行为。你试过吗？

【解决方案9】：

对我来说，我必须在元标记中包含minimum-scale：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>

【讨论】：