htmlcssmobileviewport

Not setting viewport causes long lines to have larger font size on mobile devices

I have this piece of code below:

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

I display in Google Chrome's mobile emulator and things work just fine. Then I modified the content of the 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>

And all of a sudden the font becomes extra large. What is even stranger is that the computed font size of the div is now not the default 16px, but 41.791px when I am using the iPhone SE emulator (375 * 667).

The problem is solved if I set viewport in <head>. However, I am at a loss as to why this is happening if I do not set viewport. I understand that viewport has something to do with shrinking the content size to fit the screen of a mobile device, but how come I get different font sizes with lines of different length?

Solution

  • Figured it out eventually. This is actually quite an interesting css feature I have never before laid eyes on. See here:

    Since text that has been scaled down to fit a mobile screen may be very small, many mobile browsers apply a text inflation algorithm to enlarge the text to make it more readable. When an element containing text uses 100% of the screen's width, the algorithm increases its text size, but without modifying the layout. The text-size-adjust property allows web authors to disable or modify this behavior, as web pages designed with small screens in mind do not need it.

    Also, see here:

    Chrome (v40) has an emulator "feature" described thus:

    Autosizes (boosts) text for pages without a defined viewport.

    The solution, should I choose not use a viewport meta tag, is to set this in style:

    html {
    text-size-adjust: none;
}