Responsive checker: o que as ferramentas online não veem

Um verificador responsivo online mostra sua página em várias larguras, mas falha com localhost, login e sites que proíbem o frame. Como descobrir o motivo e o que usar no lugar.

Neste artigo

Um verificador responsivo (responsive checker) mostra uma página em várias larguras de tela. As ferramentas online funcionam bem com páginas públicas que permitem ser exibidas em um frame, e falham com três tipos de página: localhost, páginas atrás de login e sites que enviam um cabeçalho proibindo a incorporação. Quando o frame aparece em branco, a causa quase sempre é a última, e você confirma em dez segundos. Para essas páginas, use uma ferramenta que rode dentro do seu próprio navegador: o modo dispositivo do Chrome DevTools ou uma extensão de visão mobile.

Qual verificador responsivo para qual página

Página que você quer checar Ferramenta online O que funciona no lugar
Página pública que permite frame Sim Qualquer ferramenta online
Página que proíbe frame Frame em branco ou erro Modo dispositivo do DevTools, extensão de visão mobile
Site de homologação atrás de login Em geral a tela de login DevTools ou extensão em uma aba onde você já está logado
localhost Não, os servidores da ferramenta não chegam lá DevTools ou extensão; para um celular real veja testar localhost no celular

Teste aqui mesmo

Digite o endereço de qualquer site para vê-lo na tela de um celular ou tablet. Troque o aparelho à esquerda: a página abre no tamanho real dele.

Por que uma ferramenta online mostra um frame em branco

A maioria das ferramentas online carrega sua página dentro de um iframe. Um site pode dizer ao navegador para não se exibir em um frame, com o cabeçalho X-Frame-Options ou a regra frame-ancestors da sua Content-Security-Policy. O MDN descreve X-Frame-Options: DENY como o bloqueio em qualquer frame, e SAMEORIGIN como a permissão só quando todos os frames pais têm a mesma origem da página. Colocar isso numa tag <meta> não tem efeito: só vale como cabeçalho HTTP. Nenhuma ferramenta consegue contornar isso, porque quem aplica a regra é o navegador, não a ferramenta.

Muitos sites grandes enviam um desses cabeçalhos. Quando olhamos em 28 de outubro de 2026, o bbc.com respondia com X-Frame-Options: SAMEORIGIN, então ele não pode ser exibido no frame de outro site. É decisão do site e não tem relação com o seu layout.

Confira em dez segundos se um site permite frame

Rode isto em um terminal e procure os dois cabeçalhos:

curl -sI https://example.com | grep -iE "x-frame-options|content-security-policy"

Se aparecer X-Frame-Options: DENY ou SAMEORIGIN, ou uma Content-Security-Policy com frame-ancestors, as ferramentas online não vão mostrar a página. Se nenhum aparecer, o frame é permitido. No Chrome, você também pode abrir o DevTools, ir em Network, selecionar a requisição da página e ler os cabeçalhos da resposta.

Se o site é seu, não enfraqueça esses cabeçalhos só para agradar um verificador: eles protegem seus visitantes de clickjacking. Teste com uma ferramenta que não precise de frame.

Com o frame bloqueado, use uma ferramenta dentro do navegador

A prévia acima também é uma ferramenta online: ela coloca a página em um frame e tem o mesmo limite. Quando um site proíbe a incorporação, a ferramenta online de visão mobile avisa em vez de mostrar um frame vazio, e a saída é a extensão. Uma extensão de visão mobile, ou o modo dispositivo do DevTools, altera a própria aba, então o cabeçalho não importa, e login e localhost funcionam como em qualquer aba. O guia do emulador mobile do Chrome cobre o DevTools, e extensão simuladora mobile ou DevTools ajuda a escolher.

O que um verificador responsivo não consegue julgar

Um verificador que só muda a largura equivale a arrastar a borda da janela do navegador. Ele não diz se o servidor envia outra página para celulares, como o layout se comporta com conteúdo longo ou zoom de 200%, nem como o Safari o desenha. O método completo, da varredura de larguras às capturas automáticas, está em como testar design responsivo. Trate o verificador como um primeiro olhar, não como aprovação.

Perguntas frequentes

Por que um verificador responsivo mostra uma página em branco para o meu site?

Geralmente porque o seu site envia X-Frame-Options ou uma regra CSP frame-ancestors que proíbe o frame. Confira os cabeçalhos da resposta como mostrado acima. Localhost e páginas atrás de login falham por outro motivo: os servidores da ferramenta não chegam até elas.

Dá para testar localhost com um verificador responsivo online?

Não. Uma ferramenta online não alcança um endereço que existe só no seu computador. Use o Chrome DevTools ou uma extensão de visão mobile na aba onde seu site local está aberto.

Um verificador responsivo basta para aprovar um site?

Não. Ele mostra o layout em algumas larguras. Uma aprovação de verdade também exige testes com conteúdo extremo e checagem em aparelhos reais, que o guia de testes responsivos detalha.

Fontes: MDN, X-Frame-Options (lido em 28 de outubro de 2026); cabeçalhos de resposta do bbc.com pedidos com curl em 28 de outubro de 2026.

Veja seu próximo site na versão mobile.

Adicione a extensão e abra prévias de aparelhos na mesma aba em que você já está trabalhando.