SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    iPhone: font-size gets bigger on orientation chg

    http://mayacove.com/mobile/test_font.html

    I looked this up the other day, it seems this tag

    Code:
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
    should help to prevent font-size from getting bigger when you change orientation form portrait to landscape...

    but for some reason this is helping ONLY for the font in the top-nav section(including links and selected, non-link nav elements), but not for main section of the page.. on the main section of the page when you switch to landscape the font gets bigger, but not the font in the top nav... I want the font-size throughout not to change (can change when user chooses to zoom up, but I don't want any font-sizes to change when orientation changes form portrait to landscape..)

    how can I prevent font in main section from changing size when I change orientation?

    (have not been able to test on Android (or Windows) phone, so I don't know if this is an issue on phones other than iPhone....)

    thank you...


    PS: just realized that with tag I have user can't zoom up, so: is there a tag that will prevent font-sizes to change on orientation chg, but that user can still zoom up if they choose to? (oh brother... mobile development; it's not just a job, it's an adventure..... ;-))

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

    Code:
    body {-webkit-text-size-adjust: none;}
    Just putting this in the main style sheet can muck up text resizing on desktop browsers, though, so it's better to put it in media queries like this:

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

  3. #3
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    that worked!!

    thank you Ralph...

  4. #4
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    how do I enable user-zoom?

    when search all I find is how DISABLE zoom... ;-)

    tried

    Code:
    user-scalable=yes
    and

    Code:
    user-scalable=1
    in that <meta name="viewport"...> tag.. neither one of them worked...

    thank you...

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Not totally sure, but it's more a case of not denying it rather than allowing it. Try removing this bit from the meta element you posted above:

    Code:
    maximum-scale=1.0;
    I presume that's what it preventing zooming.

    So you end up with

    Code:
    <meta name="viewport" content="width=device-width; initial-scale=1.0;">
    That makes the site appear full width when visitors come to your site, but doesn't prevent them from zooming in.

  6. #6
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I don't want to prevent the zoom, I want to ENABLE it.... ;-)

    but NOT on orientation change.. only when the user zooms.....

    thank you....


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
  •