# Text Size Adjust for iOS

**MUST** · **ID:** `content-text-size-adjust` · **Category:** content
**Source:** [Rauno](https://interfaces.rauno.me/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-text-size-adjust

> MUST: Set `-webkit-text-size-adjust: 100%` so iOS Safari does not inflate text on landscape rotation (this still allows user zoom).

Prevent unexpected text resizing in landscape mode on iOS with -webkit-text-size-adjust: 100%

iOS Safari inflates text when rotating to landscape to improve readability. While well-intentioned, this can break carefully designed layouts. Setting text-size-adjust to 100% prevents this behavior while still allowing user zoom.

## Rule snippet

```tsx
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
```

## Bad — do not do this

`content-text-size-adjust-bad`

```tsx
export function TextSizeAdjustBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-2">
        <h3 className="text-sm font-medium text-foreground">iOS Landscape Issue</h3>
        <p className="text-sm text-muted-foreground" style={{ WebkitTextSizeAdjust: 'auto' } as React.CSSProperties}>
          When rotating to landscape on iOS, the browser may auto-inflate text size to improve readability. This can break your carefully crafted layouts and make text inconsistently sized.
        </p>
        <code className="text-xs bg-muted px-2 py-1 rounded text-foreground inline-block">
          -webkit-text-size-adjust: auto
        </code>
      </div>
      <p className="text-xs text-error">Text may resize unexpectedly in landscape on iOS</p>
    </div>
  );
}
```

## Good — do this

`content-text-size-adjust-good`

```tsx
export function TextSizeAdjustGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-2">
        <h3 className="text-sm font-medium text-foreground">iOS Landscape Fixed</h3>
        <p className="text-sm text-muted-foreground" style={{ WebkitTextSizeAdjust: '100%' } as React.CSSProperties}>
          Setting text-size-adjust to 100% prevents the browser from inflating text when rotating to landscape. Your layouts remain consistent across orientations.
        </p>
        <code className="text-xs bg-muted px-2 py-1 rounded text-foreground inline-block">
          -webkit-text-size-adjust: 100%
        </code>
      </div>
      <p className="text-xs text-success">Consistent text size across orientations</p>
    </div>
  );
}
```

## References

- [interfaces.rauno.me](https://interfaces.rauno.me/)
- [MDN text-size-adjust](https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust)