为什么这些TD元素中的字体会以不同的大小呈现?

时间:2013-04-12 17:53:39

标签: android html browser

这是一个包含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上存在同样的问题。

example

3 个答案:

答案 0 :(得分:2)

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

如果您在普通Android浏览器(或使用WebView的任何内容)中打开页面,您将看不到此效果。

答案 1 :(得分:2)

大多数移动浏览器尝试检测页面的主要内容并将其放大,以便用户无需在没有明确移动设计的情况下放大页面,这称为“文本通胀”并由{{3在大多数情况下,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相混淆。 : - )

答案 2 :(得分:2)

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

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

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