这是一个包含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上存在同样的问题。
答案 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希望这对你有所帮助。祝你好运!