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

Question

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

呈现如下：

但是

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

以更大的字体呈现：

为什么会这样？

Answer 1

发生这种情况是因为浏览器有 native CSS sheets that they apply to markup when they display it - that is why many front-end frameworks use a variant of normalize.css。

注意：至于为什么字符数会改变字体大小，我不知道，你得参考那个浏览器的默认样式sheet。这也可能与以下事实有关：您的文本位于 body 标签之间，而不是段落标签、锚标签、header 标签等

Answer 2

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

Answer 3

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

    body{
    font-size: 1.5em;
}

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

您也可以像这样使用内联 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 时，浏览器会根据它必须使用的像素数来确定大小。

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

HTML font size issue on mobile browser

html

mobile-website