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

Posted 2023-02-22

技术标签:

【中文标题】在 Android 和桌面浏览器上不同的字体大小呈现【英文标题】：Different rendering of font-size on Android and desktop browsers 【发布时间】：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。

【问题讨论】：

【参考方案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。相关文字如下：