Simulador de iPhone para PC: como testar o seu site no iPhone usando Windows

No Mac, testar o site no iPhone é fácil: o Xcode traz um simulador de iPhone com o Safari de verdade. No Windows esse simulador não existe, e a Apple não oferece outro: quem procura um simulador de iPhone para PC não acha nenhum oficial. Isso não impede o teste, mas muda o caminho. A primeira coisa é separar dois tipos de problema.

Layout do iPhone ou Safari do iPhone

Problemas de layout dependem do tamanho da tela e da forma do aparelho: largura do viewport, densidade, a Dynamic Island, a status bar, as safe areas, o indicador de início, a versão instalada do app. Eles aparecem em qualquer navegador que reproduza essas medidas.

Problemas do Safari dependem do motor WebKit, que todo navegador do iPhone usa. Exemplos: o zoom automático ao tocar num campo com fonte menor que 16px, diferenças na rolagem elástica, recursos de CSS ou de JavaScript que o Safari ainda não suporta. Esses só aparecem no WebKit de verdade.

A maior parte dos bugs de iPhone que chegam do cliente é do primeiro tipo. E esses dá para resolver no Windows.

1. Conferir o layout do iPhone no Windows

Modo celular do navegador. No Chrome ou no Edge, F12 e depois Ctrl+Shift+M, e escolha um iPhone na lista. Você vê a largura, a densidade e o user agent certos. Não vê a moldura, a status bar, as safe areas nem o app instalado. O passo a passo está em Como ver o site no modo celular no PC e no Mac.

Breakpane. O Breakpane roda no Windows e mostra o seu projeto dentro de iPhones com as medidas reais de cada modelo: a ilha ou o notch, a status bar, as safe areas com os valores do aparelho e o modo App, que é o site instalado na tela de início. O aparelho fica flutuando na frente do editor e atualiza quando você salva. O motor continua sendo o Chromium, então ele resolve o layout, não os bugs do WebKit.

2. Ver o Safari de verdade sem ter um Mac

Aparelhos na nuvem. Serviços como BrowserStack e LambdaTest dão acesso a iPhones reais pelo navegador. Você abre o seu site publicado, ou o servidor local por um túnel que eles oferecem, e usa o Safari do aparelho remoto. São pagos, com período de teste, e servem bem para a checagem final.

Um iPhone real. Se você tem um iPhone, abra o servidor local nele pela rede:

1. Inicie o servidor aceitando conexões da rede. No Vite, npm run dev -- --host. No Next.js, next dev -H 0.0.0.0.
2. Abra no Safari do iPhone o endereço com o IP do computador, como http://192.168.0.12:5173. O iPhone e o computador precisam estar na mesma rede Wi-Fi.

Inspecionar a página do iPhone pelo Windows não vem pronto, porque a ferramenta oficial da Apple é o Safari do Mac. Existem ferramentas de terceiros que fazem essa ponte, pagas e de código aberto.

O que conferir quando abrir no iPhone

• Safe areas. Com viewport-fit=cover, o conteúdo vai até as bordas e precisa de env(safe-area-inset-top) e env(safe-area-inset-bottom) para não ficar embaixo da ilha e do indicador de início. Se os valores vierem zerados, veja Safe area não funciona.
• Altura da tela. 100vh inclui a área atrás da barra do Safari. Use 100svh na primeira tela e 100dvh em telas de app. Veja 100vh no Safari do iPhone.
• Campos de formulário. Fonte menor que 16px faz o Safari dar zoom ao tocar no campo. Esse comportamento é do WebKit e só aparece no Safari de verdade.
• Elementos fixos e teclado. Cabeçalhos e rodapés com position: fixed se comportam diferente quando o teclado abre.
• App instalado. Pela tela de início, o site abre sem a barra do Safari e a status bar passa a seguir o apple-mobile-web-app-status-bar-style. Veja Como testar um PWA.

Resumo

No Windows, resolva o layout com o modo celular do navegador ou com o Breakpane, que mostra o iPhone com as medidas e as safe areas reais enquanto você programa. Deixe para um iPhone real ou para um serviço na nuvem só o que depende do Safari.