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?
Notice how the body copy fonts are much larger than even the heading (Hx) elements?
Try this:
@media only screen and (min-width : 320px) and (max-width : 560px) {
body {-webkit-text-size-adjust: none;}
}
Ralph, that’s exactly what I needed. Thanks!
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. 
Thanks for the helpful explanation.
I’m only applying the rule at screen resolutions lower than 850px to avoid desktop resizing issues.
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.