SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Font increasing in size on dropdown menu on iPhone

    Hi, just thought I'd throw up this question and see if anyone knows why this is happening and if it's a common problem.

    I have a dropdown menu, taken from this tutorial and on iPhone's the text jumps in size when the menu is dropped down.

    I have an Android and it works fine.

    Thanks.
    Al.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,166
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Stick this in your style sheet and see if it fixes the problem:

    Code:
    @media only screen and (min-width : 320px) and (max-width : 480px) {
    	body {-webkit-text-size-adjust: none;}
    }
    If not, post a link if possible so we can check it out.

  3. #3
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again ralph! That seems to have done the trick

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,166
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Great! iOS--at least on iPhones--has this weird desire to resize text sometimes, but seems to do it very randomly. So I always add in that line to kill it off. But I do it inside @media rules to ensure that desktop browsers aren't affected, as it's horrid not to be able to resize text in your browser.

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ya it even keeps WebKit from increasing text size with zoom too. I never got to test this. But I bet using 100% or auto instead of none would still keep it from increasing on iPhone and keep desktop WebKit unaffected even outside of media queries. But it needs to be tested.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You have to be careful as you end up killing the user zoom which on small devices can be catastrophic

    There's a run down here of best practices.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,166
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You have to be careful as you end up killing the user zoom which on small devices can be catastrophic
    The only effect I've seen from -webkit-text-size-adjust is that it prevents weird, seemingly random text resizing. It certainly doesn't prevent zoom (on the iPhone) as I can still zoom in when using this.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The only effect I've seen from -webkit-text-size-adjust is that it prevents weird, seemingly random text resizing. It certainly doesn't prevent zoom (on the iPhone) as I can still zoom in when using this.
    If you resize the browser in chrome to trigger the media query you set you can see that it stops the text from being resized. I wonder if the mobile version has been updated to avoid this or its zoom is independent?

    This was the quote from the post I linked to that seemed to suggest that mobile wouldn't zoom either.
    By setting -webkit-text-size-adjust to 100% instead of none Safari keeps the same text size after an orientation change, while still allowing the user to zoom in if they need to. Setting it to 100% also seems to leave user resizing of text alone unlike none.
    I've just wrenched my wife's iphone from her steely grip and tested and it does seem that you can still zoom the text on the iphone with the value "none" set.

    So it would be safer to apply that media query rule of yours via min-device-width and max-device-width instead of giving it to desktop browsers also.

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ok that's it. I'm going to apply my obsessive perfectionism to this and find out exactly what happens. My guess is still that you can just say 100% outside of media queries and iPhone will not enlarge text - and zoom fine - and webkit big brother will still zoom text. I will set up a nice test page later today.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,166
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If you resize the browser in chrome to trigger the media query ...
    Yep, not something I've ever been too worried about, but yes, the iPhone zoom thing must have been changed since the article was written. I will try 100% instead of none, though.

  11. #11
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Here is my little test. http://www.websitecodetutorials.com/...phone-text.php

    Well I was wrong. "none" is the only one that prevents iphone from increasing text size. The others have no affect. "none" is also the only one that prevents desktop safari from increasing text size as well. None of them have any affect on the iPad.

    EDIT: I was wright and wrong. Lol. I used the number 100 as the id. That does not work as you know. I fixed that. I always thought that worked it was just not supposed to be done. could of sworn that worked a few years ago. Anyway...

    Now 100% does work as guessed to prevent iPhone from increasing text size. AND it also allows desktop safari to enlarge text on zoom and zoom text only. And has no affect on the ipad. So 100% is what should be used outside of media queries. And of course I can freely pinch in and out on iPhone and iPad. Those that prevent that should be shot. Why would you do that?

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,166
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    As Paul and I said, "none" doesn't prevent pinching and zooming on the iPhone—at least any more. What OS version are you using?

  13. #13
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    As Paul and I said, "none" doesn't prevent pinching and zooming on the iPhone—at least any more. What OS version are you using?
    I never said it does. It never has prevented pinching

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,166
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by EricWatson View Post
    I never said it does.
    O well, you seemed to imply it:

    So 100% is what should be used outside of media queries. And of course I can freely pinch in and out on iPhone and iPad. Those that prevent that should be shot.

  15. #15
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    There is some rule that can lock the iPhone and iPad into a fixed state - no pinching. They shod be shot. Not quite the reaction I thought I would get. I simply just took the time to make a test to find out once and for all the results.


Tags for this Thread

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
  •