Prevent iPhone Text Enlargement

Avatar of Chris Coyier
Chris Coyier on

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.