--- lastModified: 2026-10-10 type: feature title: "Testes de site responsivo para lojas online" description: "Confira com o Runner AI as páginas da loja em desktop, tablet e celular. Descreva falhas de layout e verifique as correções antes de publicar a loja." category: ai-websites h1: "Testes de site responsivo antes de publicar sua loja" keyword: "testes de site responsivo" legacyKind: structured --- Os **testes de site responsivo** no Runner AI começam pela loja atual e por uma tarefa concreta do cliente. Alterne a prévia entre desktop, tablet e celular, examine a mesma página e descreva uma falha com a rota e o resultado esperado. O resultado é uma correção revisável do projeto, não a garantia de que uma visualização cubra todos os navegadores e processos de compra. ## Comece os testes de site responsivo por uma tarefa Escolha uma rota e uma ação que o cliente deve concluir. Na página de produto, pode ser selecionar uma variante disponível e chegar ao carrinho. Em uma coleção, encontrar um produto sem que um filtro cubra os resultados. Use o catálogo real e o conteúdo aprovado para conferir os textos e imagens que os compradores encontrarão. Antes de começar, anote o resultado esperado e as partes da loja que devem permanecer iguais. Identifique o controle afetado e a visualização em que aparece o problema. Não troque títulos longos por exemplos curtos apenas para ajustar o layout. O [criador de lojas móveis com IA](/pt/ai-ecommerce-mobile-store-builder) aborda a etapa anterior de design. Aqui o objetivo é verificar uma loja existente. ## Compare desktop, tablet e celular A prévia da loja no Runner AI oferece três formatos. Desktop usa o espaço disponível, enquanto tablet e celular têm molduras fixas. Trocar a moldura altera o espaço da prévia sem criar outro projeto de loja. Assim você compara o mesmo conteúdo quando a distribuição fica mais estreita. Percorra a página do título até a última ação. Procure textos cortados, imagens que escondem o produto, botões sobrepostos e rolagem horizontal. Abra os menus e use os controles: um botão visível não prova que o próximo estado funciona. Repita a mesma tarefa em cada formato. As molduras são uma primeira verificação, não um simulador físico nem uma matriz completa de navegadores. Teste outras larguras e aparelhos reais separadamente quando toque, teclado móvel ou pagamentos forem importantes. ## Transforme uma falha em uma edição específica Um relato reproduzível inclui rota, visualização, estado inicial, ação e resultados esperado e observado. Uma captura pode mostrar uma sobreposição, mas explique também qual ação do cliente fica bloqueada. Por exemplo, informe que a lista de variantes cobre Adicionar ao carrinho na prévia do celular, em vez de pedir um redesenho completo da página. Forneça ao Runner AI esse pedido delimitado com dados verificados do catálogo, textos aprovados e regras da marca. Peça para preservar as seções não relacionadas e retornar as alterações de código para revisão. O [editor de sites com IA](/pt/ai-website-editor) descreve o fluxo de edição e pedidos sobre elementos quando Design Mode está disponível. Após salvar e carregar a prévia atualizada, repita primeiro a falha original e depois os outros formatos. Uma correção móvel pode mudar o espaçamento no desktop ou os controles no tablet. ## Confira o resultado antes de publicar Uma prévia aprovada fornece evidência do cenário observado. Confirme que a página certa carregou, que o conteúdo importante permanece e que a ação chega ao estado esperado. Examine a versão atual, não uma captura antiga. Se a página depende de estoque, busca ou carrinho, confira os dados no sistema responsável. Publicar continua sendo uma decisão separada. Um layout responsivo não confirma formas de pagamento, frete, impostos ou análise de dados. Use um ambiente de teste autorizado para verificar compras e um celular real para interações móveis de maior risco. O [design de sites modernos](/pt/modern-website-design) trata mudanças mais amplas de navegação e estrutura. Mantenha as falhas pendentes visíveis e repita a tarefa após cada correção. ## Perguntas frequentes ### Quais informações o Runner AI precisa para corrigir o layout? Forneça loja, rota, visualização, estado inicial, ação e resultado esperado. Descreva a falha observada e inclua uma captura quando ajudar. Acrescente dados verificados do catálogo e as seções que devem permanecer iguais. Os testes de site responsivo precisam de uma condição de sucesso observável, não de um pedido genérico para melhorar o visual. ### A prévia do celular substitui um aparelho real? Não. A moldura ajuda a revisar o layout, mas não reproduz todos os aparelhos ou navegadores móveis. Verifique as tarefas prioritárias em dispositivos reais quando toque, teclado, orientação, interface do navegador ou pagamentos importarem. A prévia não certifica aparelhos nem mede seu desempenho. ### Conferir a prévia publica minhas alterações? Não. Revisão e publicação são etapas separadas. Confira a correção salva em desktop, tablet e celular e verifique a tarefa do cliente e os sistemas conectados. Um layout correto confirma somente o cenário observado, não todas as rotas ou condições de compra. [Explore todos os recursos do Runner AI](/pt)