为什么如果不设置viewport，会导致移动端中较长的文字字体变化?

新手上路，请多包涵

问题描述：如果不设置viewport，会导致移动端中较长的文字字体变化

简单来说，我现在有这样一段代码：

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

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

此时，手机模拟器中的字体变得很大，用getComputedStyle获取字体发现字体变成了41.791px。

这个问题倒是很好解决，只要加上viewport meta标签就行，但是我没明白为什么同一个设备、同一个浏览器，只是内容长度不同，就会导致渲染出的字体大小不同？

录制了一段视频，如下：

[https://www.veed.io/view/a26252b7-1a3c-4ada-8b82-cbbc1e677621...]

css样式 viewport

阅读 239

3 个回答

得票最新

然后去远足

41.6k93563

发布于
4 月 9 日北美地区

更新于
4 月 9 日

✓ 已被采纳

这是个 Feature，叫 Font Boosting。

这就是为啥很多 CSS Reset 里都会有类似这么一句：

html { -webkit-text-size-adjust: 100%; }
/* or */
html { -webkit-text-size-adjust: none; }

就是为了关闭这个特性。

你也可以试试在不设置 viewport 的前提下加这么个 style 看看效果。

https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-ad...

along

1.2k217

发布于
4 月 9 日安徽

移动端动态设置viewport引起的大段文字字号变大

移动端动态设置viewport引起的大段文字字号变大的原因并不是什么bug，而是 Webkit 给移动端浏览器提供的一个特性：当在手机上浏览网页时，很可能因为原始页面宽度较大，在手机屏幕上缩小后就看不清其中的文字了。这个特性叫Font Boosting（字体提升），也被称为Text Autosizer，Font Inflation。而 Font Boosting 特性在这时会自动将其中的文字字体变大，保证在即不需要左右滑动屏幕，也不需要双击放大屏幕内容的前提下，也可以让人们方便的阅读页面中的文本。