Recently working on a site with some big fonts. Im talking 5 or 6 em (100px). But on an iphone4 they looked tiny.
Like so
Thats not cool.
Enter the text-size solition.
-webkit-text-size-adjust:100%
So in my CSSat the very bottom:
@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
/* Styles */
body {-webkit-text-size-adjust:100%}
}/*end iphone4 and ipad3 */
Bam, all fixed!
Now the only real issue i am left with, is that this only fixes iphones and ‘the new’ ipads. I hear there are some android tablets with retina like displays, but dont run webkit. I know thats 0.05% of people, but still wonder how to fix those. Anyone?