Search code examples
htmlcsswordpressfontsfont-size

On mobile, font size is different depending on the number of paragraphs

I’m encountering an issue I can’t pin down on a Wordpress theme I’m writing for someone.

The font size of the content on a page, or any page for that matter is improperly scaled until a certain number of paragraphs are added.

The issue is specific to mobile phones.

If you have four or fewer paragraphs the font is very small, like so:

page with four paragraphs and zoomed-out text, plus the Web Inspector

If you add a fifth paragraph it jumps up to a size that is intended.

page with five paragraphs and large text, plus the Web Inspector

This is consistent across developer tools’ various device size options you can test out, and two phones I was able to test it on here at my house.

The main class that is not contained inside of a media query is as follows:

.sprogWeekOverview p, .post p{
    margin: .67em 0;
    font-family: Georgia, serif;
    font-size: 1.15em;
    color: #1f1f1f;
    padding: 4px;
}

Other CSS code with media queries is:

@media screen and (max-width: 680px){

    .sprogWeekOverview p, .post p{
        margin: 8px 0;
        font-family: Georgia, serif;
        font-size: 16px;
        color: #1f1f1f;
        padding: 2px;
    }

  }

@media screen and (min-width: 681px) and (max-width: 1024px){

    .sprogWeekOverview p, .post p{
        margin: 12px 0;
        font-family: Georgia, serif;
        font-size: 16px;
        color: #1f1f1f;
        padding: 2px;
    }

}

The body tag has a base font-size of font-size: 16px; set.

Any insight as to why this occurs, how to fix it, and what I’m doing wrong is appreciated. Thanks.

Solution

  • Why this happens

    Mobile browsers assume by default that the site they are visiting was written for large desktop screens, not for mobile phone screens. A lot of site layouts have a sidebar or something that is only usable on large screens. Thus mobile browsers simulate a wider browser window, then display it zoomed-out so that it all fits on screen. This zooming out is why the text is small. Browsers still let you zoom in on the text with two fingers if you really want to read it.

    Separately, mobile browsers try to guess what the most important text on the page is, and then artificially increases its font size. This compromise makes article text on desktop-design news websites big enough to read without having to zoom in on them, while still making sidebars zoomed-out so they don’t take up too much space. This font size inflation is why the heading “What You Can Do” was already big at the start.

    The above behavior, zooming-out and font size inflation, is all based on guesses by the mobile browser of how the page should look. It looks like in this case, when you add a fifth paragraph, mobile browsers finally realize that the page is easy to read on mobile, so they don’t need to simulate a wide screen and zoom it out. But in general, you shouldn’t rely on any particular heuristics that mobile browsers use.

    How to fix it

    You can disable this feature for your page by adding this tag within your HTML’s <head>:

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

    This tells mobile browsers that you tested this page on small screens and confirmed that it stays readable, so they don’t need to try to automatically adapt the site for small screens. You can read more about <meta name="viewport"> in this Mozilla article.