WAVESPEED AI TESTADOR RESPONSIVO Seu código fica no seu dispositivo

100% GRÁTIS

Testador de design responsivo grátisVeja sua página em todos os tamanhos de tela ao mesmo tempo.

Digite o endereço de um site ou cole seu HTML e veja-o em quadros do tamanho de telas reais de celular, tablet, notebook e desktop, lado a lado ou um de cada vez.
Arraste um quadro para qualquer largura, gire-o, pule entre breakpoints comuns, encontre conteúdo que vaza para os lados e salve capturas de tela do seu HTML.

Mais de 40 tamanhos de telaVisualização lado a ladoDetector de transbordamento

Sem cadastro Sem proxy Sem marca d'água

Carregando o testador…

O HTML colado fica no seu navegador. Os sites carregam diretamente dos próprios servidores.

TRÊS PASSOS SIMPLES

Como testar um design responsivo

Adicione sua página

Digite o endereço de um site ou mude para HTML e cole seu código ou abra um arquivo .html. A página de exemplo mostra como funciona.

Escolha as telas

Veja um dispositivo e arraste suas bordas, ou coloque um celular, um tablet, um notebook e um desktop lado a lado. Gire qualquer um deles.

Corrija e capture

Leia os avisos sobre conteúdo mais largo que a tela, edite seu HTML e veja todos os quadros se atualizarem; depois salve capturas de tela.

Dicas para layouts que funcionam em qualquer tamanho

Comece em 320 pixels

Os celulares mais estreitos em uso têm de 320 a 360 pixels CSS de largura. Se o layout funciona aí, funciona em quase todo lugar.

Arraste, não só escolha dispositivos

Os layouts também quebram entre um dispositivo e outro. Arraste o quadro devagar do estreito ao largo e observe o momento em que algo pula ou se sobrepõe.

Nunca esqueça a tag viewport

Sem <meta name="viewport" content="width=device-width, initial-scale=1">, os celulares montam a página com cerca de 980 pixels de largura e a encolhem até o texto ficar minúsculo.

WaveSpeed AI

Do layout ao visual

Quando a página funcionar em todos os tamanhos, crie as imagens e os clipes de que ela precisa com a WaveSpeed AI.

Começar a criar Explore mais de 1.000 Modelos de IA

Mais de 1.000 modelos de IA
Imagem, vídeo e 3D
Pague conforme o uso

$1 em créditos grátis para novas contas elegíveis. Sem cartão. Os geradores têm requisitos próprios de conta e créditos. O Testador responsivo é grátis.

Perguntas frequentes sobre o testador responsivo

Este testador de design responsivo é grátis?

Sim. Sem conta, sem limite de dispositivos ou páginas, sem marca d'água nas capturas e sem nada para instalar: ele roda no seu navegador.

Como testo meu site em diferentes tamanhos de tela?

Digite o endereço do seu site ou cole seu HTML e escolha entre mais de 40 tamanhos de celular, tablet, notebook e desktop, um de cada vez ou lado a lado. Arraste um quadro para qualquer largura, gire-o ou pule para breakpoints comuns.

Quão precisos são os tamanhos dos dispositivos?

Cada quadro é uma viewport de navegador com a largura e a altura exatas daquela tela em pixels CSS, então suas media queries, layouts e breakpoints respondem exatamente como naquele dispositivo.

Posso testar meu próprio HTML ou um site local?

Sim. Cole seu HTML ou abra um arquivo .html para visualizá-lo em todos os tamanhos e editá-lo ao vivo. Os sites carregam via https; para um servidor de desenvolvimento local, use um túnel https ou cole o HTML gerado.

Ele encontra problemas de layout?

Sim. No seu HTML, ele sinaliza elementos mais largos que a tela, a causa mais comum de rolagem lateral nos celulares, e avisa quando falta a meta tag viewport.

Posso salvar capturas de tela?

Sim, para HTML colado: salve a área visível ou a página inteira como PNG na proporção de pixels do dispositivo; assim, um quadro de 393 pixels de largura em 3x gera uma imagem de 1179 pixels de largura.

O que significa o rótulo de proporção de pixels?

Os celulares concentram de dois a quatro pixels físicos em cada pixel CSS. O rótulo mostra essa proporção, e as capturas do HTML colado são salvas nela, para terem a mesma nitidez da tela real.

Minha página passa pelos seus servidores?

Não. Um site é carregado diretamente do próprio servidor pelo seu navegador, dentro dos quadros, sem proxy no meio. O HTML colado e as capturas ficam no seu navegador; sua última página e suas configurações ficam no armazenamento deste navegador.

Por que um site fica em branco?

Alguns sites optam por não ser exibidos dentro de outras páginas. Abra "Por que está em branco?" para verificar os cabeçalhos do site ou cole o HTML da página.

Todas as ferramentas grátis