Grow your CSS skills. Land your dream job.

Font sizes incorrect on smartphones

  • # May 10, 2013 at 2:45 pm

    I’m tweaking a web page so that it looks good on smart phones. I’ve declared a @media section in the CSS file so I can specify the font sizes for this page. Here’s that media section:

    @media screen and (max-device-width: 640px) {
    div#TermsOfUse {
    padding: 0 2em 0 2em;
    margin-left: auto;
    margin-right: auto;
    color: #777;
    font: small sans-serif;
    }

    div#TermsOfUse p {
    color: #777;
    font-weight: bold;
    font: small sans-serif;
    padding-top: 1em;
    padding-bottom: 1em;
    }

    #TermsOfUse #trademark_footer p {
    font: xx-large sans-serif;
    }
    }

    However, the font sizes are showing up inconsistently. I’ve told it to show the fonts “small,” but one section keeps showing the fonts in a much smaller size (id=”trademark_footer” at the bottom). Using “xx-large” doesn’t even make the font as big as the “small” font in the rest of the page. When I specify the font sizes explicitly, I have the same problem. If I specify 13px, for example, for the primary font, I have to specify something around 30px or 40px on the trademark for it to appear at a similar size. Same thing if I use “em”s.

    I’m viewing the page in Chrome on Android.

    Also, when I view this page in the following simulator, all the fonts on the entire page are tiny—far too small to read.

    [Your text to link here…](http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-iphone-5.php?u=http://inrix.com/traffic/Privacy “http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-iphone-5.php?u=http://inrix.com/traffic/Privacy”)

    First, why is the font in the trademark at the bottom of the page showing up so much smaller than the fonts on the rest of the page (Chrome on Android)?

    Second, why are all the fonts showing up so small in the iPhone simulator? The person for whom I’m doing this work looked at the page on his iPhone and sent me a screenshot with a very small font, too, similar to that in the simulator.

    All I’m trying to accomplish is to show all the fonts in a legible size on all smart phones.

    Thanks,
    Jay

    # May 10, 2013 at 7:48 pm

    Try adding this to the body element in your css to sort the iPhone font-size issue:

    -webkit-text-size-adjust: none

    # May 13, 2013 at 1:22 pm

    Although I had already found that online and tried it, I thought I would double check it, since you suggested it. The font is still very small on the iPhone simulator. I also decided to test it in the default (I think) browser on my Samsung Galaxy S2 and the font is also tiny (illegible).

    Seems like this should be really simple—override the browser CSS settings so that the font on one page shows up bigger on smartphones.

    Any other thoughts?

    # May 13, 2013 at 1:58 pm

    By the way, in the default Adroid browser, I can double tap, and it expands to a nice size.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".