Linux上的Firefox 25.0

Firefox 25.0

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

Android Chrome（裁剪）

Chrome on Android

Lorem ipsum 段落中的文字大小接近标题的大小。为什么Chrome不会显示较小尺寸的文字？

实施例

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

Answer 1

主题已陈旧但仍然......

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

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

享受。

Answer 2

<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes">代码中的

<head>可能会停用Android设备上的缩放

Answer 3

您可能在Chrome for Android中遇到此known issue。相关文字如下：

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

我们正致力于改善手机上非移动网站的显示效果，尤其是那些使用各种风格和字体的网站。

Answer 4

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

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

Answer 5

它适用于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>

在Android和桌面浏览器上进行不同的字体大小渲染

Linux上的Firefox 25.0

Android Chrome（裁剪）

实施例

5 个答案: