在 Android 和桌面浏览器上不同的字体大小呈现答案

【问题标题】：Different rendering of font-size on Android and desktop browsers在 Android 和桌面浏览器上不同的字体大小呈现
【发布时间】：2013-11-28 02:52:10
【问题描述】：

我想知道为什么我的桌面和我的 Android（默认浏览器 Chrome，在最新系统上）上的字体大小会如此不同。

总而言之，<p>（段落）中的 font-size 在 Android 上太大了。

我使用CSS reset stylesheet (article in french)。

Linux 上的 Firefox 25.0

您可以看到 Lorem ipsum 段落的文本减少了（相对于页面的文本）。标题有较大的文字。

Android Chrome（裁剪）

Lorem ipsum 段落中文本的大小接近于Title 的大小。为什么 Chrome 不显示较小尺寸的文本？

示例

请参阅 jsfiddle：edit、fullscreen 和 fullscreen without jsfiddle bar。

【问题讨论】：

标签： css firefox font-size android-browser

【解决方案1】：

这个话题很老了，但仍然..

我找到了一些解决方法。但仍在战斗：

如果您强制段落具有高度，它会再次变为正常。
设置<meta name="HandheldFriendly" content="true"/> 也会立即修复所有段落。

享受吧。

【讨论】：

这仍然是我在 2019 年底找到的最佳解决方案。元标记在 Marshmallow (Android 6) 中修复了这个问题。

【解决方案2】：

<head> 标签中的<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes"> 可以禁用 Android 设备上的缩放

【讨论】：

【解决方案3】：

它适用于我 iPhone 上的 Chrome。您是否尝试过在您的 Android 设备上使用其他浏览器来查看是否得到不同的结果？

另外，我会删除巨大的 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>

【讨论】：

感谢您的回答。我的Android手机上你的jsfiddle没有问题，大小是正确的。我的问题中的 CSS 样式表仅包含相关规则。

【解决方案4】：

可以使用-webkit-text-size-adjust / text-size-adjust 属性

编辑：检查Android Chrome ignoring -webkit-text-size-adjust:none property. Text is being scaled when zoomed out

【讨论】：

【解决方案5】：

您可能会在 Android 版 Chrome 中遇到这个known issue。相关文字如下：

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

我们正在努力改进非移动网站在手机上的显示效果，尤其是那些使用多种样式和字体的网站。

【讨论】：

由于我在各个网站上观察到同样的问题，我认为它与浏览器本身有关，而不是我的代码。谢谢
只是为了添加一些上下文，Android 不喜欢小于 8px 的字体，并且会主动将任何值增加到最小。