text-size-adjust

text-size-adjust controls the text-inflation algorithm used by some mobile browsers. It is not a pinch-zoom control, a desktop font-size rule, or a setting for user accessibility text preferences.

Inspect a responsive document on a real device

This complete document supplies a normal mobile viewport and leaves inflation at auto. Desktop previews may show no change because they do not use the same inflation algorithm. Copy it to a standalone file and compare portrait and landscape on a target mobile browser.

<h1>Text inflation inspection</h1>
<p>
  Readable text should fit the device without disabling user zoom. Rotate a
  mobile device and inspect the text and line wrapping.
</p>

html {
  -webkit-text-size-adjust: auto;
  text-size-adjust: auto;
}
body {
  max-width: 40rem;
  line-height: 1.5;
}

Inspect an explicit percentage

This version requests 100% through both the older WebKit prefix and the unprefixed property. Its observable purpose is a mobile-device comparison, not an artificial font-size change in this iframe. It still allows user zoom.

<h1>Percentage inspection</h1>
<p>
  Compare this copied document with the auto version on a mobile browser that
  implements text inflation. Use zoom and rotate the device separately.
</p>

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  max-width: 40rem;
  line-height: 1.5;
}

Values and defaults

The property is inherited. The initial behavior on supporting smartphone browsers is auto. Auto permits the inflation algorithm, none disables that algorithm, and a nonnegative percentage requests its scaling factor. Other engines may ignore the property, and prefix/value support differs. MDN currently marks it experimental; inspect the target compatibility rows.

Common mistakes

None does not mean “disable pinch zoom”; do not conflate inflation with viewport zoom settings. A CSS support query for an unrelated Safari property is not a reliable device test. Start with responsive layout, readable font sizes, and a width=device-width viewport. Do not add maximum-scale=1 or user-scalable=no to prevent readers from enlarging content.

Learn meta, font-size, and responsive design.

Sources and browser support

MDN: text-size-adjust describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.