Question

我有下面的HTML（也在this fiddle中）。当我在Android设备上的Chrome中查看时，它看起来很不错。

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" rel="stylesheet" />
<h1>This is a header</h1>

<div class="row">
  <div class="column">
    <p>Text</p>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="panel">
      <p>Some long text.</p>
      <hr />
      <p>Some long text.</p>
      <p>Some long text.</p>
    </div>
  </div>
</div>

＆＃13;

然而，当我调整＆＃34;长文本＆＃34;段落实际上包含一大段文本（如下面的代码片段和this fiddle），然后段落中字体的大小由于某种原因变得更大。

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" rel="stylesheet" />
<h1>This is a header</h1>

<div class="row">
  <div class="column">
    <p>Text</p>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="panel">
      <p>Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text.</p>
      <hr />
      <p>Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text.</p>
      <p>Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text.</p>
    </div>
  </div>
</div>

＆＃13;

这似乎只发生在Android上的Chrome中（据我所知）。谁能告诉我为什么会这样？这是Chrome中的错误，还是我错过了什么？

Answer 1

此问题是由Chrome for Android实施“字体提升”引起的（这可能适用于一般的webkit浏览器，但我没有在其他任何地方遇到此问题）。

基本上，为了尝试提高移动浏览器上网页的易读性，Chrome会自动神奇地增加段落的字体大小（这样用户无需放大即可阅读）。但是，仅适用于超过一定长度的段落，导致较长的段落以更大的字体大小显示在其上下文中。

Chrome无法禁用此功能。但是，有一些可能的修复（在this SO question中讨论）可以应用，以阻止它尝试“提升”字体大小。这些通常归结为：

<强> 1。明确指定<p>元素的高度尺寸。

这可以通过将max-height: 999999px或min-height: 1px应用于该段落来完成。但是，据报道，这会导致某些浏览器（例如Safari）出现缩放问题。

<强> 2。明确指定视图框的尺寸。

在<head>部分添加以下标记可以做到这一点：

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

这会禁用字体提升并修复原始问题中的问题。

基础CSS字体大小调整问题（Android上的Chrome）

1 个答案: