SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Larger fonts for phones

    I'm happy with the size of my site's font on a laptop/desktop but it's too small on a phone. Can I show a larger font size for phones?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Sure you can. Here's an example:

    Code:
    @media only screen and (max-width : 560px) {
    	body {font-size: 150%;}
    }

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please forgive my ignorance but where should that line be written? I tried it in my external stylesheet but there was no affect.

    What about the new phones with 1080p screens? This won't apply to them even though the screen is physically small, correct?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by tonearm View Post
    Please forgive my ignorance but where should that line be written? I tried it in my external stylesheet but there was no affect.
    That was the right place to put it. Usually that works for me. Make sure to refresh the page, and it it still doesn't work, more investigation is needed. If fonts are set on various elements in px then it may not work (that's the only time I've seen issues with this).

    You can, of course, set different fonts sizes for each element in the same way. I just targeted the body element because it's easier.

    What about the new phones with 1080p screens? This won't apply to them even though the screen is physically small, correct?
    I can't speak for all phones, but phones like the iPhone still obey rules like width: 320px even though they pack in far more pixels than that.

    We'll be happy to have a look if you want to post a link.

  5. #5
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Implement his idea like this on your page above the </head> tag:

    <style type="text/css">
    body {
    font-size: 100%
    @media only screen and (max-width : 560px) {
    body {font-size: 150%;}
    }
    }
    </style>
    </head>
    Steve Husting

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If fonts are set on various elements in px then it may not work (that's the only time I've seen issues with this).
    My fonts are all set in em but I got it to work by changing max-width to max-device-width. Is there a difference or should that be OK?

    I found this which seems to suggest using 568px:

    http://stephen.io/mediaqueries/

    I also noticed the page above uses min-device-width in addition to max-device-width but that isn't necessary for what I'm doing, is it?

    I can't speak for all phones, but phones like the iPhone still obey rules like width: 320px even though they pack in far more pixels than that.
    The page above mentions "Device-pixel-ratio" which confirms what you said. It sounds like these pixel measurements aren't so much pixel measurements as they are screen size designations.

    Thanks a lot for your help, I think this will help a lot when using the same site for desktop and mobile. Any other optimizations to consider for devices like phones with small screens?

  7. #7
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Should this code trigger any non-mobile devices? This makes me wonder:

    http://stackoverflow.com/questions/1...retina-display

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by tonearm View Post
    I got it to work by changing max-width to max-device-width
    That's not recommended by the expert I prefer to follow.

    He recommends max-width in conjunction with the meta viewport element:

    Code:
    <meta name="viewport" content="width=device-width">

  9. #9
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it depends on what you're doing. If you're setting up a full-blown responsive design site, max-width and viewport make sense. But my application is just increasing the font size on small screens. In that case I think max-device-width without a viewport setting makes the most sense and it should be relatively quirk-free.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •