iPhone dá zoom ao tocar no campo? Como tirar o zoom do input no Safari

Resposta curta: o Safari do iPhone dá zoom quando o texto de um campo fica abaixo de 16 px. Deixe input, textarea e select com pelo menos 16 px de fonte, no valor calculado, e o zoom some. Não use maximum-scale=1 na meta viewport: ele resolve no iPhone, mas no Android tira o zoom de pinça de quem precisa aumentar o texto.

Por que o Safari dá zoom

Quando a pessoa toca num campo com texto pequeno, o Safari aumenta a página para o que ela digita ficar legível. A regra é simples: fonte calculada abaixo de 16 px no elemento focado. Com 16 px, nada acontece. Com 15 px, ou 15,75 px, a página aumenta.

Dois detalhes deixam isso pior do que parece:

• O zoom não volta sozinho. Quando a pessoa sai do campo, a página continua aumentada e o layout parece quebrado. Ela precisa fazer pinça para voltar.
• Vale para todo navegador do iPhone. Chrome e Firefox no iOS usam o mesmo motor do Safari, o WebKit. O problema aparece neles também, e também no PWA instalado.

A correção em CSS

input,
textarea,
select {
  font-size: max(16px, 1em);
}

O max() garante o piso de 16 px e deixa o campo crescer junto com o texto em volta, se ele for maior. Confira os casos que costumam escapar:

• Editores e contenteditable. Um editor de texto rico também é um campo para o Safari. Aplique a mesma regra no elemento editável.
• html { font-size: 62.5% }. Com esse truque, 1rem vale 10 px. Um campo com 1.4rem fica em 14 px e dá zoom.
• Fonte fluida com clamp() ou vw. Numa tela estreita, o valor calculado pode cair para 15,8 px. É o calculado que conta, não o que está escrito no CSS.
• Tailwind. text-sm é 14 px. Use text-base no celular e diminua só em telas maiores: class="text-base md:text-sm".

Se o design pede um campo com cara de 14 px, a saída honesta é desenhar o campo em 16 px no celular. Truques com transform: scale() para encolher o texto depois funcionam, mas bagunçam a largura, o cursor e a seleção.

O atalho que resolve errado

A correção que mais aparece por aí é mudar a meta viewport:

<!-- não faça isso -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

No iPhone, ela para o zoom automático e o Safari ainda deixa a pessoa fazer pinça. No Android, o Chrome obedece ao maximum-scale à risca e bloqueia o zoom de pinça. Quem tem baixa visão perde o único jeito de aumentar o texto, e a página falha no critério 1.4.4 (Redimensionar texto) das WCAG. user-scalable=no tem o mesmo problema.

Duas outras correções que circulam e não resolvem este caso:

• -webkit-text-size-adjust: 100% controla o aumento automático do texto ao girar o celular, não o zoom do campo.
• touch-action: manipulation tira o zoom de toque duplo, não o zoom ao focar.

Como achar todos os campos pequenos

Abra a página com a largura de um celular e rode no console:

[...document.querySelectorAll('input, textarea, select, [contenteditable]')]
  .map((el) => [el, parseFloat(getComputedStyle(el).fontSize)])
  .filter(([, size]) => size < 16);

A lista traz cada campo abaixo de 16 px com o tamanho calculado. Rode com a largura do celular porque as media queries mudam a fonte: um campo pode ter 16 px no computador e 14 px no celular.

Como testar o zoom

O zoom ao focar é comportamento do iOS, então só aparece no Safari de verdade: num iPhone ou no Simulador do Xcode, no Mac. O modo celular do Chrome não dá esse zoom, e o Breakpane também não, porque o motor dele é o Chromium.

O que o Breakpane faz é achar a causa. Com os agentes de código ligados, peça ao Claude Code, ao Cursor ou ao Codex uma auditoria da página. Ela aponta cada campo com fonte abaixo de 16 px (com o tamanho calculado) e a meta viewport que bloqueia o zoom, em todos os aparelhos abertos de uma vez. Depois da correção, confira uma vez no iPhone. Se você não tem Mac, veja como testar o site no iPhone usando Windows.

Checklist

• Todo input, textarea, select e contenteditable com fonte calculada de 16 px ou mais, na largura do celular.
• Meta viewport sem maximum-scale e sem user-scalable=no.
• Conferido num iPhone ou no Simulador: tocar no campo não aumenta a página.