2

这是一个带有 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 上也有同样的问题。

例子

4

3 回答 3

3

您看到的是 Chrome for Android 的“有用”字体增强功能。没有保证可以禁用它。

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

于 2013-04-15T11:58:21.357 回答
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-和其他浏览器供应商的前缀作为前缀。

另外，不要与字体大小调整相混淆。:-)

于 2013-04-16T16:01:12.697 回答
2

我在手持设备上不规则地调整文本大小时遇到​​了类似的问题。我通过在里面添加以下三行来解决它<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
希望这对您有所帮助。
祝你好运！

于 2013-04-19T21:56:08.133 回答