logo标签列表

安卓和桌面浏览器中字体大小的不同渲染

cssfirefoxfont-sizeandroid-browser
9
我想知道为什么在我的桌面和安卓设备（最新系统上的默认浏览器Chrome）上字号会有如此大的差异。
简而言之，在Android设备上，段落中<p> 的字号太大了。
我使用了CSS重置样式表（法文文章）。
Linux上Firefox 25.0
你可以看到Lorem ipsum段落的文本缩小了（相对于页面文本）。Title的文本更大。
Android Chrome（裁剪后） Lorem ipsum段落中的文本大小接近Title。为什么Chrome不显示较小的字体呢？
示例
请参见jsfiddle：编辑、全屏和没有jsfiddle栏的全屏。
5个回答
7

虽然这个话题已经老旧了，但仍然有用。

我发现了一些解决方法。尽管还在努力中：

  1. 如果你强制设置段落的高度，它就会恢复正常。
  2. 设置 <meta name="HandheldFriendly" content="true"/> 也会立即修复所有段落。

享受吧。

这仍然是我在2019年底找到的最佳解决方案。元标记可以修复Marshmallow（Android 6）中的此问题。 - Mike Poole
3
在 <head> 标签中使用 <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes"> 可能会导致 Android 设备无法缩放界面。
2
1

在我的iPhone上的Chrome浏览器中它可以正常工作。您是否尝试在Android设备上使用另一个浏览器以查看是否会得到不同的结果？

enter image description here

此外，我建议删除那个大型的 CSS 重置样式表，并从更基本的 CSS 开始。这可以使调试过程更容易。不妨从以下样式开始：http://jsfiddle.net/mb8Db/1/ 
<style>
body {
    font-family:"Century Gothic", helvetica, arial, sans-serif;
    font-size: 1.4em;
    line-height: 1.5;
}
/* failing on Android */
 body > main > article {
    font-size:1em;
}
body > main > article p {
    font-size:0.75em;
}
</style>

<main>
     <h3>Header</h3>
    <article>
        <header>
             <h3>Title</h3>
        </header>
        <p>Paragraph</p>       
    </article>
</main>
谢谢你的回答。在我的安卓手机上，你的jsfiddle没有问题，尺寸正确。我问题中的CSS样式表只包含相关规则。 - A.L
1
你可能在Android版Chrome浏览器中遇到了已知问题。相关文本如下：

某些网站（例如Reddit和T-Mobile）的字体大小不一致。

我们正在改进手机上非移动网站的显示效果，特别是那些使用大量样式和字体的网站。

由于我在各种网站上都观察到了同样的问题，我认为这与浏览器本身有关，而不是我的代码。谢谢。 - A.L
只是为了增加一些背景，Android 不喜欢小于 8px 的字体，并会将任何值主动增加到该最小值。 - dougoftheabaci
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接