A tela de visualização está em branco e o site não é exibido. Por quê?

Se o site de destino tiver definido 'X-Frame-Options' ou 'Content-Security-Policy' como medida de segurança e não permitir a incorporação de iframe de outros sites, o navegador bloqueará a exibição.

Posso pré-visualizar uma URL de ambiente local (localhost)?

Sim, você pode. Se você tiver um servidor local rodando no seu PC, você pode inserir uma URL como http://localhost:3000 para testá-la.

📱

responsive previewer,

Visualizador Responsivo

Pré-visualize designs responsivos
em 12 larguras de dispositivos apenas inserindo uma URL.

📱

12 Dispositivos Suportados

Cobrindo de iPhones a PCs

🔄

Escala e Orientação

Reduza e gire facilmente

🔒️

Sem Processamento no Servidor

Renderização segura no lado do cliente

* Se o site não carregar, ele pode restringir a incorporação de iframe.

Escala:

Orientação:

Dispositivo:

Insira uma URL para iniciar a visualização

Gerador de Cron

🧩

JSON para TS Interface

🔒

Verificador de Cabeçalhos HTTP

about,

Sobre o Visualizador Responsivo

O Visualizador Responsivo é uma ferramenta gratuita de suporte ao desenvolvimento web que permite verificar rapidamente como uma única URL aparece em vários tamanhos de tela (smartphones, tablets e desktops) diretamente no seu navegador. Mesmo sem vários dispositivos físicos, você pode testar quebras de design e o comportamento do layout usando resoluções padrão de dispositivos como iPhones, iPads e PCs.

how to,

Como Usar

PASSO 1

Inserir URL

Cole a URL do site que você deseja visualizar na caixa de entrada e clique no botão "Visualizar".

PASSO 2

Selecionar Dispositivo

Alterne entre as guias Móvel, Tablet e Desktop e selecione o dispositivo específico (por exemplo, iPhone 15 Pro Max) que deseja testar.

PASSO 3

Ajustar Orientação e Escala

Alterne entre os modos Retrato e Paisagem. Se a tela não couber, ajuste a escala (por exemplo, 50%, 75%) para ver a visualização inteira.

glossary,

Glossário

Design Web Responsivo (Responsive Web Design): Uma abordagem de desenvolvimento web que cria mudanças dinâmicas na aparência de um site, dependendo do tamanho da tela e da orientação do dispositivo em uso.
Viewport: A área visível pelo usuário de uma página da web. Em dispositivos móveis, a tag <meta name="viewport" ...> é usada para controlar a largura de exibição e a escala.
Media Queries: Um recurso do CSS3 que permite que a renderização do conteúdo se adapte a condições como resolução da tela, largura ou altura.

faq,

Perguntas Frequentes

Q.A tela de visualização está em branco e o site não é exibido. Por quê?: Se o site de destino tiver definido 'X-Frame-Options' ou 'Content-Security-Policy' como medida de segurança e não permitir a incorporação de iframe de outros sites, o navegador bloqueará a exibição.
Q.Posso pré-visualizar uma URL de ambiente local (localhost)?: Sim, você pode. Se você tiver um servidor local rodando no seu PC, você pode inserir uma URL como http://localhost:3000 para testá-la.

use cases,

Casos de Uso

📱

Verificação durante o desenvolvimento web

Teste rapidamente como as páginas da web recém-criadas ficam em smartphones ou PCs e identifique qualquer quebra de layout durante o processo de produção.

🚀