Mobile Safari text sizing woes.

Update: Modified code to use technique mentioned here.

For a while I’ve been frustrated by a rendering issue in Mobile Safari. It commonly happens in footers whereby the text gets rendered bigger than specified.

It turns out after some googling, the solution is quite simple. Using the following, Mobile Safari should leave your font sizing alone.


html { -webkit-text-size-adjust: 100%; }

Source: http://website-engineering.blogspot.com/2009/07/stop-adjusting-text-size-in-iphone-when.html

Published by

Jamie

Hi, I am the Managing Director of SonicIQ Limited in the UK. I have been working in the web development industry since 1999 and have been running SonicIQ since 2001. Currently Ruby On Rails is my preferred development platform. I am experienced in designing with web standards, HTML5, CSS3 and Javascript.

10 thoughts on “Mobile Safari text sizing woes.”

  1. Omfg yes! I was about to run screaming into the hills as this font resize bollocks was happening with the text appearing in jquery tabs that fade in from display:none.

    It’s great to know that one can control this “intelligent” *cough*choke*gag* behaviour.

  2. thanks dude. i had a sneaking suspicion a minimum font size was to blame for the issue i was seeing. This post was a quick confirmation and test of my theory. You saved me a few hours of troubleshooting.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>