O jeito mais preciso de testar um site no iPhone sem ter um é o simulador de iOS que vem com o Xcode no Mac. Ele roda o Safari real do iOS, então mostra os bugs de renderização do Safari, o teclado na tela e a interface do navegador. No Windows ou no Linux não existe simulador oficial de iOS; as opções são o WebKit pelo Playwright, um serviço pago de aparelhos na nuvem ou uma visualização mobile no Chrome para conferir o layout.
Veja como cada opção funciona e o que ela pega.
Por que testar no iPhone exige Safari, e não Chrome
Todos os navegadores do iPhone, inclusive Chrome e Firefox, historicamente tiveram que usar o motor WebKit da Apple. Hoje a Apple permite outros motores em algumas regiões, mas o WebKit continua sendo o que quase todo usuário de iPhone vê. O WebKit tem comportamento próprio em coisas como 100vh e a barra de endereço que recolhe, position: fixed com o teclado na tela, controles de formulário, seletores de data e alguns recursos novos de CSS.
Por isso uma página pode ficar perfeita na emulação de iPhone do Chrome e mesmo assim quebrar num iPhone de verdade. O Chrome consegue copiar o tamanho de tela e o user agent do iPhone, mas desenha a página com o próprio motor.
Opção 1: Simulator do Xcode no Mac (grátis, o mais próximo do real)
- Instale o Xcode pela Mac App Store. O download é grande.
- Abra o Xcode, vá em Settings > Components (Platforms em versões antigas) e instale um runtime de iOS, se não houver.
- Abra o simulador em Xcode > Open Developer Tool > Simulator.
- Escolha um aparelho em File > Open Simulator, abra o Safari no celular simulado e digite sua URL.
O simulador usa a rede do Mac, então http://localhost:3000 funciona lá dentro sem configuração extra. Você pode girar o aparelho, mudar o tamanho do texto no app Ajustes simulado e testar o modo escuro.
Inspecionando a página com o Web Inspector do Safari
Para depurar o que você vê:
- No Mac, abra o Safari, vá em Ajustes > Avançado e ative Mostrar recursos para desenvolvedores web.
- No menu Desenvolvedor do Safari, escolha o simulador e depois a página aberta.
Você tem o Web Inspector completo (elementos, console, rede) para a página rodando no Safari do iOS. O mesmo menu também lista um iPhone real conectado por cabo, depois que você ativa o Web Inspector no celular em Ajustes > Apps > Safari > Avançado (em versões antigas do iOS, Ajustes > Safari > Avançado).
Opção 2: WebKit pelo Playwright (Mac, Windows, Linux)
O Playwright é uma biblioteca open source de automação de navegadores que traz uma versão do WebKit para os três sistemas desktop. Ele inclui descritores de aparelhos para modelos de iPhone, que definem viewport, densidade de pixels, user agent e suporte a toque.
Isso não é o Safari do iOS. É o motor WebKit num sistema desktop, sem a interface própria do navegador do iOS. Mesmo assim, ele pega boa parte das diferenças de renderização do WebKit e pode ser automatizado, então dá para tirar prints de cada página importante no tamanho de iPhone no seu CI. Para quem desenvolve no Windows, é o jeito mais barato de ver o WebKit.
Opção 3: serviços na nuvem com aparelhos reais
Serviços como BrowserStack, LambdaTest e Sauce Labs alugam acesso a iPhones reais num data center e transmitem a tela para o seu navegador. Você tem hardware real, Safari real e muitas versões do iOS. São pagos, geralmente com um teste grátis limitado, e a tela remota tem um pouco de atraso.
Use-os nas conferências finais dos fluxos importantes (cadastro, checkout) quando não tiver nem Mac nem iPhone, ou quando precisar de uma versão antiga do iOS.
Opção 4: uma visualização rápida no tamanho de iPhone no Chrome
Para questões só de layout (o menu cabe em 390 px? a imagem principal corta bem?), uma visualização no tamanho de iPhone no Chrome basta e leva segundos:
- o modo dispositivo do Chrome DevTools com um preset de iPhone, explicado no guia do emulador mobile do Chrome
- uma extensão de visualização mobile como o Mobile View Extension, que recarrega a aba numa moldura de iPhone com o user agent e o tamanho de tela do iPhone
Trate isso como a primeira passada. Tudo o que parecer estranho, e tudo o que envolver formulários, rolagem ou elementos fixos, merece uma conferência com a opção 1, 2 ou 3.
O que cada opção pega
| Problema | Visualização mobile do Chrome | Playwright WebKit | Simulator do Xcode | Aparelho real na nuvem |
|---|---|---|---|---|
| Layout na largura do iPhone | Sim | Sim | Sim | Sim |
| Servidor entregando outra página mobile | Sim (user agent) | Sim | Sim | Sim |
| Diferenças de CSS e JavaScript do WebKit | Não | Quase todas | Sim | Sim |
Barra de endereço e comportamento do 100vh |
Não | Não | Sim | Sim |
| Teclado na tela cobrindo campos | Não | Não | Sim | Sim |
| Desempenho e memória reais | Não | Não | Não | Sim |
Uma rotina prática de teste no iPhone
- Confira o layout em 375 px e 393–402 px numa visualização mobile do Chrome.
- Abra as páginas principais no Simulator do Xcode (ou no Playwright WebKit, no Windows).
- Preencha todos os campos dos formulários observando o teclado e os elementos fixos.
- Role as páginas longas para ver como os cabeçalhos fixos e a barra de endereço interagem.
- Antes do lançamento, faça o fluxo mais importante pelo menos uma vez num iPhone real ou num aparelho na nuvem.
Os tamanhos de viewport dos iPhones atuais estão na tabela de tamanho da tela do iPhone. Para os outros navegadores dos seus visitantes, veja o checklist de cross browser testing.
Perguntas frequentes
Dá para testar um site no Safari do iPhone pelo Windows?
Não com um simulador oficial: o Simulator da Apple só roda no macOS. No Windows, use o WebKit pelo Playwright para conferências no nível do motor ou um serviço na nuvem com aparelhos reais para o Safari de verdade.
O Simulator do Xcode é igual a um iPhone real?
Ele roda o iOS e o Safari reais, então a renderização fica muito parecida. Mas roda no processador do Mac, por isso desempenho, limites de memória e alguns recursos de hardware são diferentes de um celular real.
Por que meu site funciona na emulação de iPhone do Chrome, mas quebra no iPhone?
A emulação do Chrome copia o tamanho e o user agent do iPhone, mas renderiza com o motor do Chrome. Bugs específicos do motor WebKit do Safari só aparecem no Safari.