为什么字段集中的文本有时在移动设备上显得更大？

Question

我发现了一个我不明白的奇怪 Chrome“功能”。在响应式设计中使用 fieldset 时，与页面的其他内容相比，字段集中的文本有时会显得更大。

当我从文本中删除几个字符时，它突然变得与页面上的任何其他块一样大。

例如，以下页面是由 Chromium 49 使用设备模式生成的。 Android 智能手机运行 Chrome 上的显示非常相似。响应式设计模式下的 Firefox 没有故障。

这是the corresponding code。没有外部 CSS 文件。

<html>
<head>
<style>
body{font-size:.8em;}
</style>
<body>
<div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta sus
cipit ultricies.
        Sed velit quam, viverra eget accumsan dapibus, finibus eu lorem.
        Vestibulum aliquam, neque sed ullamcorper tristique, arcu augue condimen
tum orci, id vulputate nisl mauris non mas.
    </p>
    <fieldset>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta
 suscipit ultricies.
            Sed velit quam, viverra eget accumsan dapibus, finibus eu lorem.
            Vestibulum aliquam, neque sed ullamcorper tristique, arcu augue cond
imentum orci, id vulputate nisl mauris non mas.
        </p>
    </fieldset>
    <fieldset>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta
 suscipit ultricies.
            Sed velit quam, viverra eget accumsan dapibus, finibus eu lorem.
            Vestibulum aliquam, neque sed ullamcorper tristique, arcu augue cond
imentum orci, id vulputate nisl mauris non ma.
        </p>
    </fieldset>
</div>
</body>
</html>

在这段代码中，页面的第一个 <p> 和第一个 <fieldset> 中的包含相同的文本。第二段<fieldset>少了一个字

发生了什么事？

请注意，一个丑陋的解决方法是在样式中指定 fieldset{font-size:.999em;}。它使所有三个段落看起来相似。话虽这么说，我对这个 feature/glitch 而不是 workaround/hack.

的起源更感兴趣

Answer 1

我发现此行为是设计使然。

为了防止Chrome在Android或设备模式下的Chromium根据块的内容调整字体大小，应添加以下元元素：

<meta name="viewport" content="width=device-width, initial-scale=1">

来源：Joe DeRose's answer 到一个类似的问题。

进一步阅读：Using the viewport meta tag to control layout on mobile browsers 在 MDN。

为什么字段集中的文本有时在移动设备上显得更大？

Why is text within a fieldset appearing sometimes larger on mobile devices?

html

css

responsive