SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    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,319
    Mentioned
    462 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
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    that worked!!

    thank you Ralph...

  4. #4
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    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,319
    Mentioned
    462 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
    825
    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....

  7. #7
    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 maya90 View Post
    I don't want to prevent the zoom, I want to ENABLE it...
    Yes, I was just pointing out that you were disabling it, as it works by default normally.

  8. #8
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    hmmmm.. thank you Ralph.. so here's another challenge:

    need to make something appear dynamically, but ONLY for phones... (using jQuery)

    when you make elements appear dynamically the style gets inserted inline, so you can't overwrite it...


    thank you....

  9. #9
    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)
    Probably need a more concrete example to be sure of what you mean. But you can have a class on an element which is set to display: none in the desktop styles and display: block in the phone styles, for example.

  10. #10
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    well, needed to trigger event based on user input, but ONLY in phones (not tablets...) so either way, whether changing classes, show/hide, etc.. needed to find a way to detect screen dimensions..

    so just did

    Code:
    if (screen_width < 480) {
    :-)


    (question: 480 is the width of iPhone screen (when in landscape), right? but don't some Android phones have larger screens? what is screen width of LARGEST smartphone??)

    thank you......

  11. #11
    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 maya90 View Post
    480 is the width of iPhone screen (when in landscape), right? but don't some Android phones have larger screens? what is screen width of LARGEST smartphone?
    The iPhone is actually much wider than 480px, but it obeys the 480px wide rule, and I think Android phones do too.

    so just did

    Code:
    if (screen_width < 480) {
    I've never seen code like that—not in CSS anyway. Is this PHP, JS or ...?

  12. #12
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    it's JavaScript.... jQuery, to be precise...

    I trigger an event (show an element) only if user is on a phone.....

    so the phones "obey" a 480 rule, even though those are not their real dimensions?? well that's interesting..... ;-)

    so I'm safe for all phones with that rule? ok..

    once again thank you very much, Ralph.... you have been very very helpful....


    edit: PS: actually I did..

    Code:
    if (screen_width <= 480) {
    (if 480 or less than, instead of just less than...) that should be a bit safer, no? ;-)

  13. #13
    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 maya90 View Post
    so the phones "obey" a 480 rule, even though those are not their real dimensions?
    Certainly iPhone does. I can't say for sure with others, but I think so. The iPhone display has gradually packed in more pixels (with the retina display etc.) and it would be an awful pain if you had to target each iPhone version differently, so thankfully they've spared us that misery.

    once again thank you very much, Ralph.... you have been very very helpful....
    Glad to be of help. I admit I'm a bit of a blind leader, but better than nothing, hopefully.

    (if 480 or less than, instead of just less than...) that should be a bit safer, no? ;-)
    Sounds good to me.


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
  •