Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Font sizes incorrect on smartphones

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #44695
    birdus
    Member

    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/Privacyhttp://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

    #134738
    jshjohnson
    Member

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

    -webkit-text-size-adjust: none

    #134948
    birdus
    Member

    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?

    #134952
    birdus
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.