SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    iPhone landscape view blows up font sizes

    When I view my site on iPhone in landscape orientation, the body text fonts are way too large. In portrait, the fonts display fine.

    Anyone see the source of the problem?

    http://canvas.clickbump.com/

    Notice how the body copy fonts are much larger than even the heading (Hx) elements?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Try this:

    Code:
    @media only screen and (min-width : 320px) and (max-width : 560px) {
    	body {-webkit-text-size-adjust: none;}
    }

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ralph, that's exactly what I needed. Thanks!

    Have you run into this before?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Scott Blanchard View Post
    Have you run into this before?
    Ah yes, it's a very common issue, actually. Mobile Safari (and possible other browsers, too) has this habit of resizing bits of text any old how, seemly at random, supposedly to make it easier to read. I'm amazed they persist with it, as it's clearly borked, and I can't imaging anyone ever wanting this, so I always add the code above to avoid the mess it creates.

    I only serve it up to small screens, though, because if you use it without @media rules targeted at small screens it will affect Safari on the desktop—preventing users from resizing text—which is not good.

    Some people recommend instead using -webkit-text-size-adjust: 100%; but I'm not convinced. It prevents the desktop Safari issue, but I've been told it has poor results on Android devices. Using -webkit-text-size-adjust: none; as shown above won't affect anyone adversely, except perhaps the few boffins who squeeze their desktop Safari browser down below 500px and try to increase font size.

  5. #5
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the helpful explanation.

    I'm only applying the rule at screen resolutions lower than 850px to avoid desktop resizing issues.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    as shown above won't affect anyone adversely, except perhaps the few boffins who squeeze their desktop Safari browser down below 500px and try to increase font size
    Why not used device-width instead of min-width and avoid desktop users altogether?

    More info from a previous thread.

    Plus old info on the problem.
    http://www.456bereastreet.com/archiv...ze-adjustnone/
    http://www.456bereastreet.com/archiv...ing_user_zoom/


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
  •