Foundation CSS 字体大小问题(Chrome on Android)

Foundation CSS font sizing issue (Chrome on Android)

我有下面的 HTML(也在 this fiddle 中)。当我在 Android 设备上的 Chrome 中查看时,它看起来不错。

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

但是,当我将 "long text" 段落调整为实际包含一大段文本时(如下面的代码片段和 this fiddle),则该段落中的字体大小为由于某种原因变得更大。

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

这似乎只发生在 Android 的 Chrome 中(据我所知)。谁能告诉我为什么会这样?这是 Chrome 中的错误,还是我遗漏了什么?

此问题是由 Chrome for Android implementing "font boosting" 引起的(这可能适用于一般的 webkit 浏览器,但我没有在其他任何地方遇到过该问题)。

基本上,为了尝试增加网页在移动浏览器上的易读性,Chrome 将自动神奇地增加段落的字体大小(这样用户就不必缩放阅读它)。但是,这 仅适用于超过一定长度的段落 ,导致较长的段落在其上下文中以更大的字体显示。

无法在 Chrome 中禁用此功能。然而,可以应用一些可能的修复(在 this SO question 中讨论)来阻止它尝试 'boost' 字体大小。这些通常归结为:

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

这可以通过对段落应用 max-height: 999999pxmin-height: 1px 来完成。但是,据报道,这会导致某些浏览器(例如 Safari)出现缩放问题。

2。明确指定视图框架的尺寸。

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

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

这将禁用字体增强并修复原始问题中的问题。