Font increasing in size on dropdown menu on iPhone

[allanlud]

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.

[ralph.m]

Stick this in your style sheet and see if it fixes the problem:

@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.

[allanlud]

Thanks again ralph! That seems to have done the trick

[ralph.m]

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.

[PicnicTutorials]

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.

[Paul O'B]

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.

[ralph.m]

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.

[Paul O'B]

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.

[PicnicTutorials]

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.

[ralph.m]

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.

[PicnicTutorials]

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?

[ralph.m]

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?

[PicnicTutorials]

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

[ralph.m]

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.

[PicnicTutorials]

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.