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

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.

score 0 · Accepted Answer · edited May 23 '17 at 11:48

I discovered that this behavior is by design.

In order to prevent Chrome on Android or Chromium in Device mode to adjust the font size depending on the content of a block, the following meta element should be added:

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

Source: Joe DeRose's answer to a similar question.

Further reading: Using the viewport meta tag to control layout on mobile browsers at MDN.

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

1 Answers1