Pular para o conteúdo

Visualização responsiva

Visualizar qualquer site em tamanhos de celular, tablet e desktop e comparar lado a lado, sem abrir as ferramentas de desenvolvedor do navegador.

Alguns sites bloqueiam a incorporação com um cabeçalho X-Frame-Options; veja as perguntas frequentes abaixo.

Tamanho do dispositivo
Tamanho personalizado
px
px

Prévia do site

375 x 667

Compare celular, tablet e desktop de uma só vez

A mesma página renderizada em três larguras lado a lado, para que você possa identificar falhas de layout sem precisar alternar os tamanhos um por um.

Celular390 x 844

Tablet768 x 1024

Desktop1440 x 900

Como funciona

Uma ferramenta de visualização responsiva carrega um site dentro de um iframe dimensionado para a largura e altura escolhidas do dispositivo, ajustado para caber na tela, para que você possa verificar um design responsivo em tamanhos de celular, tablet e desktop sem redimensionar a janela do navegador ou abrir as ferramentas de desenvolvedor.

  1. Digite uma URL

    Digite um endereço e clique em Visualizar, ou pressione Enter.

  2. Escolha um tamanho

    Escolha um dispositivo predefinido ou defina uma largura e altura personalizadas de até 3.840 px.

  3. Comparar

    Gire, ative ou desative a moldura do dispositivo ou role para baixo para ver celular, tablet e desktop juntos.

O que esta ferramenta verifica e o que ela não verifica

A visualização renderiza a página no tamanho lógico de pixels CSS do dispositivo escolhido, portanto é precisa para verificar layout, breakpoints e imagens responsivas que usam media queries CSS ou o atributo sizes.

  • Device-pixel-ratio: o iframe não simula a maior densidade de pixels de uma tela Retina, então uma imagem trocada apenas por uma query min-resolution pode não corresponder exatamente a um dispositivo real.
  • Toque e hover: esta é uma aba de navegador controlada por mouse, então interações que dependem apenas de hover se comportam como em um desktop, não como em uma tela sensível ao toque.
  • Incorporação bloqueada: um site que envia um cabeçalho X-Frame-Options ou frame-ancestors recusa carregar em qualquer iframe, incluindo este; essa é uma configuração de segurança do próprio site, não algo que uma ferramenta de visualização possa substituir.

Para testes com precisão de pixel

Utilize a própria emulação de dispositivo do seu navegador (barra de dispositivos do DevTools) ou um dispositivo físico. Esta ferramenta é mais rápida para uma verificação rápida de layout em várias larguras ao mesmo tempo, mas não substitui testes em hardware real antes do lançamento.

Perguntas frequentes

Como visualizar um site em diferentes tamanhos de tela sem usar o DevTools do navegador?

Digite a URL do site e clique em Visualizar. Em seguida, escolha um dispositivo predefinido, iPhone SE (375x667), iPad (768x1024), Desktop (1440x900) e outros, ou digite uma largura e altura personalizadas. O site carrega dentro de um iframe escalonado correspondente àquela viewport. Clique em Girar para alternar entre retrato e paisagem.

Quais tamanhos de dispositivo estão incluídos na ferramenta de visualização responsiva?

As predefinições incluem iPhone SE (375x667), iPhone 14 (390x844), iPad (768x1024), iPad Pro (1024x1366), MacBook (1280x800) e Desktop (1440x900). Você também pode inserir qualquer largura e altura personalizadas de até 3.840 px e clicar em Aplicar tamanho personalizado para visualizar um ponto de interrupção não padrão.

Posso comparar celular, tablet e desktop ao mesmo tempo?

Sim. Abaixo da visualização principal, a seção Comparar mostra a mesma URL nas larguras de celular, tablet e desktop lado a lado, para que você possa identificar onde um layout quebra sem precisar alternar os tamanhos um por um.

Por que um site não carrega na visualização responsiva?

Muitos sites bloqueiam a incorporação via iframe com o cabeçalho HTTP X-Frame-Options ou Content-Security-Policy: frame-ancestors. Quando um site envia esses cabeçalhos, o navegador se recusa a exibi-lo dentro de qualquer iframe. Essa é uma medida de segurança do lado do servidor e não pode ser contornada por uma ferramenta de visualização. Os sites afetados geralmente incluem mecanismos de busca, redes sociais e sites bancários.

Como testo o layout de um site na orientação paisagem?

Após selecionar uma predefinição de dispositivo, por exemplo iPhone 14 em 390x844, clique no botão Girar. Isso troca a largura e a altura para 844x390, simulando o modo paisagem. O tamanho exibido acima da visualização é atualizado para corresponder. Clique em Girar novamente para retornar ao modo retrato.

Qual é a limitação da visualização responsiva baseada em iframe?

A visualização renderiza o site nas dimensões lógicas em pixels da janela de visualização escolhida, mas não reproduz a proporção real de pixels do dispositivo (device-pixel-ratio). Imagens de alta resolução ou media queries direcionadas a min-resolution podem não se comportar exatamente como em um dispositivo real. Para testes com precisão de pixel, use a emulação de dispositivo do navegador ou um dispositivo físico.