iPhone Text Resizing Avoid ‑webkit‑text‑size‑adjust: none

By Matt on Apr 25, 2012

To improve readability on websites designed for desktop browsers, Mobile Safari on iPhone will automatically increase the size of small text. For designers sweating every last detail, this adjustment is not always desirable. The right way to work around it is to set ‑webkit‑text‑size‑adjust: 100%. Avoid none at all costs. Here’s why.

Mobile and desktop are affected

At first glance, it seems that -webkit-text-size-adjust controls only the auto-scaling of small text in mobile versions of WebKit. However, the ‑webkit‑text‑size‑adjust property affects more than just auto-scaling, and more than just mobile browsers.

On the desktop, -webkit-text-size-adjust also dictates whether text will be resized when the browser zoom feature is used. That is, whether the text actually gets bigger when you press ⌘+. If you do this:

-webkit-text-size-adjust: none

…then you’ve just disabled text resizing entirely. When you hit ⌘+, the images and layout will get bigger, but text will stubbornly remain the same size. This is almost never what you want.

Best practice

Most sites not specifically designed for mobile first should be well served by the default setting:

-webkit-text-size-adjust: auto

If you are designing for mobile first, or you are trying to disable unwanted auto-enlargement of small text in mobile Safari, use this technique:¹

-webkit-text-size-adjust: 100%

The 100% value tells WebKit to disable the automatic behavior, but to still allow user-initiated zoom.

Notes

Developers using Twitter Bootstrap may be interested to know that Bootstrap uses ‑webkit‑text‑size‑adjust: 100% out of the box. ↩