Text Size for Safari iPhone

Here’s a couple of tips for getting your website to look right on the iPhone. You may notice that when you check out a website you have designed on the iPhone Safari browser, some of the text get automatically re-sized and can alter your layout and make it look a bit odd. Funnily enough, this happens to be to do with the auto-text re-sizing built into the iPhone Safari browser.

To counteract this effect, and to present your website as it would look in a normal desktop browser, you can add the following style to your body tag:

< body style="-webkit-text-size-adjust: none">

This works great, but unfortunately the declaration isn’t supported by W3C yet and therefore will invalidate your CSS. You will have to make a choice as to whether this bothers you or not. Personally, although I love to keep things as valid as I can, I would rather the site looked as I intended it to.

Of course this throws up other questions, such as; is my site legible without the default enlarged text -or- would I prefer people to have to zoom in, or can I live with a slight layout imperfection due to enlarged text?. It’s your call.

Another supported declaration is a multiplier percentage. You can tell Safari iPhone to enlarge any text by a percentage value:

< div style="-webkit-text-size-adjust: 200%">

Hope these tips are useful