不设置视口会导致长行在移动设备上具有更大的字体大小文件

问题描述 投票：0回答：1

我有下面这段代码：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <div>This is not so long a piece of text.</div>
    </body>
</html>

我在 Google Chrome 的移动模拟器中显示，一切正常。然后我修改了div的内容：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <div>This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long piece of text.</div>
    </body>
</html>

字体突然变得特别大。更奇怪的是，当我使用 iPhone SE 模拟器（375 * 667）时，div 的计算字体大小现在不是默认的 16px，而是 41.791px。

如果我在

viewport
中设置
<head>
，问题就解决了。但是，如果我不设置
viewport
，我不知道为什么会发生这种情况。我知道视口与缩小内容大小以适应移动设备的屏幕有关，但为什么我会得到不同长度的线条的不同字体大小？

html css mobile viewport
1个回答
0
投票

最终想通了。这实际上是一个我以前从未见过的非常有趣的 CSS 功能。请参阅此处：

由于缩小以适合移动屏幕的文本可能非常小，因此许多移动浏览器应用文本膨胀算法来放大文本以使其更具可读性。 当包含文本的元素使用 100% 的屏幕宽度时，算法会增加其文本大小，但不会修改布局。 text-size-adjust 属性允许网络作者禁用或修改此行为，因为考虑到小屏幕而设计的网页不需要它。

另外，请参阅此处：

Chrome (v40) 有一个模拟器“功能”，如下所述：

自动调整（增强）没有定义视口的页面的文本大小。

如果我选择不使用视口元标记，解决方案是在样式中设置它：

html {
    text-size-adjust: none;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.