Simulador de Viewport

Gratuito DevTools

Simulador de Viewport Responsivo

Simule como seu site aparece em diferentes tamanhos de tela diretamente no navegador. Pre-sets para iPhone, iPad, desktop e dimensoes customizadas. Sem instalacao.

3.8k usuarios Atualizado em Mar 2026 4.7/5

Avalie esta ferramenta:

4.7 (534 votos) Obrigado!

Mobile Tablet Desktop Custom

Alguns sites bloqueiam carregamento em iframes (X-Frame-Options / CSP). Nesse caso, o frame ficara em branco.

Digite uma URL acima e clique em Carregar para visualizar o site no viewport selecionado.

Como Usar

Teste responsividade em segundos.

Digite a URL

Cole o endereco do site que deseja testar no campo de URL.

Selecione o dispositivo

Escolha um preset de iPhone, iPad, desktop ou defina dimensoes customizadas.

Carregue o site

Clique em Carregar para visualizar o site no viewport selecionado.

Gire e explore

Use o botao Girar para alternar entre portrait e landscape.

Sobre o Simulador de Viewport

Esta ferramenta carrega qualquer URL em um iframe redimensionado para simular diferentes tamanhos de tela. E util para uma verificacao rapida de responsividade sem precisar abrir o DevTools do navegador.

Limitacoes importantes:

Sites com X-Frame-Options ou CSP configurados nao permitirao carregamento em iframe.
A simulacao e visual — nao emula toque, densidade de pixels (DPR) ou User Agent de dispositivos reais.
Para testes completos, use o DevTools do Chrome/Firefox (F12) ou dispositivos fisicos.

Artigo

Design Responsivo: Viewports, Breakpoints e Como Testar seus Layouts

Por Equipe Chipak • Atualizado em Mar 2026 • 5 min de leitura

Neste artigo

O que e viewport
Breakpoints mais usados em 2026
Abordagem mobile-first
Como testar responsividade corretamente
Ferramentas complementares
Perguntas frequentes

1. O Que E Viewport

O viewport e a area visivel da pagina web no dispositivo do usuario. Em dispositivos moveis, o viewport pode ser diferente da resolucao fisica da tela — por isso o uso da meta tag <meta name="viewport"> e essencial para que o layout responsivo funcione corretamente.

O simulador desta ferramenta ajusta a largura e altura do iframe para imitar o tamanho logico do viewport, escalando o conteudo quando necessario para caber na tela.

2. Breakpoints Mais Usados em 2026

Os breakpoints sao os pontos de quebra onde o layout se adapta a diferentes tamanhos. Os mais comuns no ecossistema atual:

320px - 480px: smartphones antigos e pequenos.
375px - 430px: iPhones modernos (SE, 14, 15).
360px - 412px: Android populares (Samsung, Pixel).
768px: iPad portrait / tablets compactos.
1024px: iPad landscape / laptops pequenos.
1280px - 1440px: desktops e laptops comuns.
1920px: telas Full HD.

3. Abordagem Mobile-First

Mobile-first significa escrever o CSS base para telas pequenas e usar @media (min-width: ...) para ampliar o layout em telas maiores. E o oposto de desktop-first, que usa @media (max-width: ...).

Mobile-first e recomendado porque garante que o layout funcione bem em dispositivos com menos capacidade de processamento, e porque a maioria do trafego web atualmente vem de dispositivos moveis.

"Se seu site nao funciona em um iPhone SE (375px), voce pode estar perdendo uma parcela significativa dos seus usuarios."

4. Como Testar Responsividade Corretamente

Para testes completos, use uma combinacao de ferramentas:

DevTools do Chrome/Firefox (F12): modo de dispositivo com emulacao de toque, DPR e User Agent.
Dispositivos fisicos: insubstituivel para detectar problemas de performance e toque real.
Simuladores de viewport (como este): rapida verificacao visual sem sair da pagina atual.
BrowserStack / LambdaTest: para testar em dispositivos e sistemas operacionais reais via nuvem.

5. Ferramentas Complementares

Alem do simulador de viewport, considere usar:

Lighthouse: auditoria de performance e acessibilidade integrada ao Chrome DevTools.
CSS Grid Inspector / Flexbox Inspector: ferramentas visuais do Firefox DevTools para debugar layouts.
Responsively App: aplicativo desktop que exibe multiplos viewports simultaneamente.

6. Perguntas Frequentes

Por que alguns sites nao carregam no simulador?

Sites que configuram o cabecalho HTTP X-Frame-Options: DENY ou politicas CSP restritivas bloqueiam o carregamento em iframes por razoes de seguranca. O simulador nao pode contornar essa restricao.

O simulador emula toque?

Nao. O simulador e puramente visual — ele ajusta o tamanho do viewport mas nao emula eventos de toque, User Agent de dispositivos moveis ou densidade de pixels. Para isso, use o modo de dispositivo do Chrome DevTools.

Posso testar localhost ou sites locais?

Sim, desde que o servidor local esteja rodando e acessivel. Use http://localhost:3000 ou o IP da maquina. Atencao: sites HTTPS nao podem carregar iframes HTTP por restricoes de mixed content.