Blog
Guias sobre visualização mobile, design responsivo e dicas do Chrome da equipe Mobile View Extension.
Extensões do Chrome para desenvolvedores web que valem a pena
Extensões do Chrome para desenvolvedores web que cobrem lacunas reais do DevTools: ferramentas de frameworks, acessibilidade, inspetores, visualização mobile e segurança.
Ler artigo →Breakpoints do Bootstrap 5 e grid responsivo explicados
Breakpoints do Bootstrap 5, largura dos containers, classes do grid responsivo, mixins Sass e utilitários de display, e como personalizar e testar tudo isso.
Ler artigo →Como mudar o user agent no Chrome (sem extensão)
Mude o user agent no Chrome sem extensão: Network conditions do DevTools, modo dispositivo, client hints, um parâmetro de inicialização e Playwright.
Ler artigo →Ferramentas do desenvolvedor do Chrome: guia prático do DevTools
Guia prático das ferramentas do desenvolvedor do Chrome: como abrir o DevTools, o que cada painel principal faz e os atalhos que mais economizam tempo.
Ler artigo →Emulador mobile do Chrome: como usar o modo dispositivo do DevTools
Passo a passo do emulador mobile do Chrome: ative o modo dispositivo, escolha ou adicione aparelhos, limite rede e CPU, emule toque e tire prints.
Ler artigo →Teste cross-browser: checklist prático e ferramentas gratuitas
Como testar um site em vários navegadores com pouco orçamento: quais navegadores cobrir, o que verificar e ferramentas gratuitas como o Playwright.
Ler artigo →Media queries CSS explicadas, com exemplos para celular
Media queries CSS explicadas: sintaxe, min-width ou max-width, a sintaxe de intervalos, recursos para mobile, modo escuro e toque, e erros comuns.
Ler artigo →O teste de compatibilidade com dispositivos móveis do Google acabou: o que usar no lugar
O Google desativou o Mobile-Friendly Test em dezembro de 2023. Estas ferramentas gratuitas o substituem, e aqui vai uma rotina de 10 minutos para checar uma página.
Ler artigo →Como deixar um site responsivo: 10 ajustes que fazem diferença
Dez mudanças para deixar um site responsivo: tag viewport, layout fluido, áreas de toque, formulários e imagens, com código pronto para copiar.
Ler artigo →Como testar a responsividade de um site: um método que acha bugs de verdade
Passo a passo para testar a responsividade de um site: varredura de larguras, perfis de aparelhos, testes com conteúdo extremo, zoom e prints automáticos.
Ler artigo →Tamanho da tela e viewport do iPhone: a tabela completa
Todos os iPhones, do SE ao iPhone 18 Pro Max: tamanho de tela, resolução, viewport CSS e densidade de pixels, com notas para web designers.
Ler artigo →Lighthouse no Chrome: auditoria mobile pelo DevTools ou pela extensão
Auditoria Lighthouse mobile no Chrome DevTools, na extensão ou na linha de comando: configurações, notas, por que variam e o que corrigir primeiro.
Ler artigo →Como deixar um site WordPress responsivo no celular
Como corrigir um site WordPress que fica ruim no celular: tema, blocos e construtores de página, menus, imagens, plugins e testes.
Ler artigo →Mobile first: o que é e como aplicar no design e no CSS
O que mobile first significa para conteúdo, layout e CSS, a diferença para desktop first, um exemplo de código e os erros mais comuns.
Ler artigo →Teste de velocidade do site no celular: como medir e melhorar
Como fazer um teste de velocidade mobile que faça sentido: dados de campo e de laboratório, limites das Core Web Vitals, ferramentas gratuitas e correções que funcionam.
Ler artigo →Como tirar print de site na versão mobile pelo computador
Tire um print de qualquer página no tamanho de celular pelo Chrome no computador: área visível ou página inteira, com ou sem moldura de aparelho.
Ler artigo →Simulador de celular no Chrome: extensão ou DevTools, qual usar?
Extensões de simulador mobile para Chrome ou modo dispositivo do DevTools: o que cada um emula e qual escolher para testes no celular.
Ler artigo →Checklist de teste de site mobile: 30 verificações antes do lançamento
Um checklist prático para testar um site no celular: layout, navegação, formulários, mídia, velocidade, SEO e acessibilidade, com a ferramenta certa para cada verificação.
Ler artigo →Breakpoints responsivos: valores comuns e como escolher
Breakpoints CSS comuns para celular, tablet e desktop, como Tailwind, Bootstrap e Material se comparam e como escolher breakpoints a partir do conteúdo.
Ler artigo →Tailwind responsivo: breakpoints e media queries no Tailwind CSS
Como o design responsivo funciona no Tailwind CSS v4: breakpoints padrão, prefixos mobile first, variantes max e intervalos, breakpoints personalizados e testes.
Ler artigo →Como acessar localhost pelo celular (e ver em visualização mobile)
Como acessar localhost pelo celular: IP da rede local e --host, port forwarding do Chrome, túneis, endereços em emuladores e correções comuns.
Ler artigo →Emulador Android online e para PC: como testar um site no Android
Teste um site no Chrome para Android pelo computador: visualizações mobile no Chrome, o emulador do Android Studio e depuração remota de um celular real.
Ler artigo →Emulador de iPhone para PC: como testar um site no iPhone sem ter iPhone
Teste um site no Safari do iPhone sem ter um iPhone: Simulator do Xcode, Web Inspector do Safari, WebKit pelo Playwright e aparelhos na nuvem.
Ler artigo →User agent switcher: o que faz e quando você precisa de um
O que um user agent switcher muda, por que sozinho ele não dá uma visualização mobile, onde entram os client hints e como escolher uma extensão segura.
Ler artigo →Como ver a versão mobile de um site no computador
Quatro jeitos de abrir a versão mobile de qualquer site no computador, o que cada método realmente mostra e qual usar para uma conferência rápida.
Ler artigo →Como ver um site como no iPad ou tablet no Chrome
Três jeitos de ver um site em tamanho de tablet no Chrome, os viewports dos iPads atuais e por que o Safari no iPad costuma receber o layout de desktop.
Ler artigo →Meta tag viewport: o que usar e por quê
O que a meta tag viewport faz no mobile, a linha que toda página precisa, valores a evitar e opções mais novas como viewport-fit e interactive-widget.
Ler artigo →Site desconfigurado no celular: por que acontece e como corrigir
Onze motivos para um site aparecer diferente no celular e no computador, da falta da meta tag viewport e do cache ao modo escuro e às particularidades do Safari.
Ler artigo →O que é design responsivo? Princípios e exemplos
O que é design responsivo e responsividade de sites: origem, princípios, diferença entre responsivo e adaptativo, técnicas de CSS atuais e como testar.
Ler artigo →O que é viewport e como descobrir o tamanho dele
Tamanho do viewport explicado: pixels CSS vs resolução de tela, device pixel ratio, layout e visual viewport, unidades svh e dvh e como conferir o seu.
Ler artigo →
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.