为什么这些 TD 元素中的字体呈现不同的大小？答案

【问题标题】：Why does the font in these TD elements render at different sizes?为什么这些 TD 元素中的字体呈现不同的大小？
【发布时间】：2013-04-05 08:43:12
【问题描述】：

这是一个包含 2 个 TD 的简单表格。 http://z5h.github.io/broken_render/broken.html

在 Android 上最近的 Chrome / Firefox 上，它们以非常不同的大小呈现。我不清楚为什么。

在桌面浏览器上则没有。

减少第一个 td 中的文本数量可以解决问题。指定每个元素样式不会更改字体大小。例如 http://z5h.github.io/broken_render/broken-styled.html

这是为什么？

代码是

<html>
  <head>
    <meta content='text/html;charset=utf-8' http-equiv='Content-Type'> 
  </head>
  <body>
    <table>
      <tr>
        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </td>
      </tr>
      <tr>
        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        </td>
      </tr>
    </table>    
  </body>
</html>

这是在 Nexus 4 上完全最新的 Chrome 上的样子。在 Firefox 上也有同样的问题。

【问题讨论】：

您尚未使用 CSS 设置字体样式。
浏览器正在应用默认字体样式，这可能因浏览器而异。为字体应用一些 CSS 规则来解决问题。
我怀疑用户代理样式表将样式应用于第一个子行或最后一个子行，因此您可以尝试为这些伪选择器指定样式
另外，当第一个 td 中的文本较少时，它会呈现更小的尺寸！

标签： android html browser

【解决方案1】：

您看到的是 Chrome for Android 的“有用”字体增强功能。 There's no guaranteed way to disable it。

如果您在普通的 Android 浏览器（或任何使用 WebView 的浏览器）中打开页面，您将看不到此效果。

【讨论】：

【解决方案2】：

大多数移动浏览器会尝试检测页面的主要内容并将其放大，这样用户就不必在没有明确的移动设计的情况下放大页面，这称为“文本膨胀”，由 text-size-adjust 控制大多数情况下的 CSS 属性。

从上述链接中窃取的语法示例：

text-size-adjust: none               /* text is never inflated */
text-size-adjust: auto               /* text may be inflated */
text-size-adjust: <percentage>       /* text may be inflated of this exact proportion */

请注意，text-size-adjust 属性未标准化，因此可能必须以-webkit-、-moz- 和其他浏览器供应商的前缀作为前缀。

另外，不要与 font-size-adjust 混淆。 :-)

【讨论】：

【解决方案3】：

我在手持设备上不规则地调整文本大小时遇到了类似的问题。我通过在<head></head> 中添加以下三行来解决它。

<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

在此处阅读有关视口元标记的更多信息： http://davidbcalhoun.com/2010/viewport-metatag
希望这对您有所帮助。
祝你好运！

【讨论】：