Grow your CSS skills. Land your dream job.

Prevent iPhone Text Enlargement

Published by Chris Coyier

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.

Comments

  1. Permalink to comment#

    Oh wow, very cool little add-on, thanks chris :)

  2. Paul
    Permalink to comment#

    Nice that's pretty cool :D
    Now make a video of you designing a template then coding it.

  3. Permalink to comment#

    There's something called accessibility, and the iphone is trying to achieve it. Let it do his work.

  4. Sometimes Accessibiltiy is not the best answer – although it should be a priority whenever possible

  5. 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.

  6. Permalink to comment#

    I can't think of any example, can you help me?

    • Yes, I can. The landing page of my site: http://stevelosh.com/

      I use large text for that page so reading it’s not an issue, but if the text size gets altered in one column and not the other it throws everything off.

  7. Wouter Ernsting
    Permalink to comment#

    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!

  8. Permalink to comment#

    Thanks so much for this little tip, the text enlarging has been bugging me for a while now!

  9. Mahanth Seetharaman
    Permalink to comment#

    how to link like making go to another page after sliding

    thanks in advance Chris Coyier

    Yours Sincerely
    Maganth Seetharaman

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".