Adjusting font size only for iPhone/iPod Safari

[Bluestreak]

Is there a way to adjust the font size in a block only for people who read my site using Safari on their iPhone/iPods? My site looks fine otherwise, but there's one particular block where the font is too big on the iPhone (normal desktop versions of Safari looks fine).

Is there a way to adjust the font size in this block so I can make it smaller ONLY for iPhone/iPod browsers? Thanks for any help!

[tedster]

The user agent strings for these always contain either the string "iPod" or "iPhone" - and both support javascript. So you can do basic javascript user agent detection and serve either an extra CSS file or a unique CSS file whenever one of the two user-agents is detected.

[Bluestreak]

Thanks for the response! I wish I didn't have to resort to javascript user detection but I may not have a choice. Oh well!

[swa66]

You don't need Javascript.

Safari support media queries and apple [developer.apple.com] even tells you how to let the iphone use that to get a different set of CSS for it.

Maybe best to first read how they work: [webmasterworld.com...] before getting buried in the details.

media queries are not readily supported by all browsers yet (it's in the CSS3 standard. Notable absent is IE (all versions, including IE8), but that should not stop you from using it.

[Bluestreak]

Thanks for the response!

Instead of using a media query, I used the webkit property instead:

-webkit-text-size-adjust:none

That fixed my problem right up. :-D