Prevent iPhone Text Enlargement
* 11/28/2008 — 9 Comments *
The iPhone has a funny way of bumping up the text size on websites when viewing them fairly far “zoomed out”. This can be wonderful, as it can help the text be readable while seeing more of the website. It can also be unexpected, undesirable, and break otherwise perfect layouts.
To prevent this on your site, you can use this:
-webkit-text-size-adjust: none;Apply it selectively, or directly to the body to prevent resizing everywhere.
Thanks to Ed Brandt for sending in this trick. It fixed a problem on Ed’s site of some text wrapping in the footer when it shouldn’t.
Loading ...
Oh wow, very cool little add-on, thanks chris
Nice that's pretty cool
Now make a video of you designing a template then coding it.
There's something called accessibility, and the iphone is trying to achieve it. Let it do his work.
Sometimes Accessibiltiy is not the best answer - although it should be a priority whenever possible
In the example in the picture of this article, I'd say the text enlargement is good and looks good. But perhaps you have a couple of buttons on a page that line up side by side, and the iphone is enlarging them and forcing a weird line break, you may with to target those and tell it not to enlarge that text.
I can't think of any example, can you help me?
There is other ways of fixing this though. iPhone CSS stylesheet comes to my mind in any case, the nice thing about the iPhone is that not a lot of the original CSS will have to be changed. Also by using the Apple guido to designing web apps you can get some really good looking websites working exactly the way you would want them to on the iPhone!
Thanks so much for this little tip, the text enlarging has been bugging me for a while now!