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

时间：2016-06-08 12:30:27

标签： html mobile-website

我在Chrome移动模拟器中显示一个简单的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>

渲染如下：

enter image description here

但是

<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>

使用更大的字体呈现：

enter image description here

为什么会这样？

3 个答案:

答案 0 :(得分：3)

使用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时，浏览器会根据其使用的像素大小来确定大小。

答案 1 :(得分：0)

这是因为浏览器在显示标记时会将native CSS sheets应用于标记 - 这就是许多前端框架使用normalize.css变体的原因。

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

答案 2 :(得分：0)

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

相关问题
最新问题