Question

I found a strange Chrome “feature” I don't understand. When using fieldset with responsive design, the text within the fieldset would sometimes appear much bigger compared to the other contents of the page.

When I remove a few characters from the text, it suddenly takes the same size as any other block on the page.

For instance, the following page is generated by Chromium 49 using Device mode. The display is very similar on an Android smartphone running Chrome. Firefox in responsive design mode doesn't have the glitch.

This is the corresponding code. There are no external CSS files.

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

In this piece of code, the first <p> of the page and the one inside the first <fieldset> contain the same text. The paragraph in the second <fieldset> contains one character less.

What is happening?

Note that an ugly workaround consists of specifying fieldset{font-size:.999em;} in the styles. It makes all three paragraphs appear similar. This being said, I'm more interested about the origin of this feature/glitch rather than a workaround/hack.

Answer 1

我发现这种行为是设计上的。

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

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

来源：Joe DeRose's answer提出类似的问题。

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

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

1 个答案: