移动浏览器上的HTML字体大小问题

我在Chrome移动模拟器中显示简单的HTML标记，并且观察到当文本长度超出特定阈值时，呈现文本的大小突然变得非常大（我观察到同一问题物理设备）：移动浏览器上的HTML字体大小问题

<html> 
    <body> 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    </body> 
</html>

呈现这样的：

但是

<html> 
    <body> 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    </body> 
</html>

呈现了较大的字体：

为什么会这样呢？

来源

2016-06-08 fiddler

使用CSS来手动设置字体大小和，而不是使用像素的具体数量（像素为默认值）的大小来确定使用em这样。

body{ 
    font-size: 1.5em; 
}

这会强制HTML保持文本大小与浏览器或窗口大小成比例。

您可以像这样使用内联css。

<BODY> 
    <span style="font-size:1.5em;"> 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    </span> 
</BODY>

这是因为当浏览器确定字体大小，基于像素，它不关注，它被显示在屏幕的大小。但是，当您使用em时，浏览器将根据需要处理的像素大小来确定大小。

来源

2016-06-08 19:28:47

非常明确的解释。谢谢。 – fiddler

发生这种情况是因为浏览器有native CSS sheets，它们在显示时应用于标记 - 这就是为什么许多前端框架使用normalize.css的变体。

注意：至于为什么字符数会改变字体的大小，我不知道，您必须参考该浏览器的默认样式表。这也可能与您的文本位于body标签之间而不是段落标签，锚标签，标题标签等有关。

来源

2016-06-08 12:38:21

我试图在我的示例中包含'normalize.css'，但它没有解决问题。 – fiddler

Em ..那么，为什么你不想谷歌它并找到规范？ :) –

在<head>中添加以下代码。浏览器认为这是桌面版本，并尝试缩放它。那为什么它是如此之小： <meta name="viewport" content="width=device-width, initial-scale=1">

来源

2016-06-08 12:55:51

那么，我已经知道这个解决方法，但我想了解上述行为 – fiddler

移动浏览器上的HTML字体大小问题

回答

相关问题