Adaptar o layout ao celular e ao contêiner

A unidade 100vh esconde o botão de confirmar atrás da barra de endereço do celular assim que a página abre, e o cliente desiste sem tocar em nada. Esse é o primeiro de quatro defeitos que a tela pequena cobra caro.

Os outros três vêm junto. A tela do celular muda de tamanho durante o uso e o dedo cobre uma área bem maior que o ponto tocado. O teclado errado custa toques a mais.

A medida de altura certa, o espaço devolvido nos cantos do aparelho, o tamanho de alvo por norma e o teclado certo resolvem os quatro, nessa ordem.

Tudo começa na unidade 100vh, que significa cem por cento da altura da área visível, o pedaço da página que cabe na tela. Ela conta essa área sem a barra de endereço do navegador.

No celular a barra costuma estar à vista quando a página abre, então o bloco nasce mais alto que o espaço real e o botão cai fora. A página ainda dá um pulo quando a barra some, porque arrastar a página para cima recolhe a barra e muda a altura disponível.

Duas unidades resolvem, e a diferença é qual estado da barra cada uma conta. A pequena (svh) conta com a barra à vista e garante que nada seja cortado na abertura. A dinâmica (dvh) acompanha o movimento da barra em tempo real.

Use a dinâmica no bloco de tela cheia. No botão que precisa aparecer logo, como o de continuar do checkout, use a pequena.

O segundo defeito são os recortes do aparelho: a câmera em cima e a barra de gestos embaixo. O navegador só desenha por baixo deles quando você pede, e quem pede precisa devolver o espaço. São dois passos, e pular o primeiro faz o segundo devolver zero.

No primeiro passo, uma linha na configuração de tela do site autoriza o desenho sob os recortes. No segundo, o recuo que o aparelho informa entra no espaçamento de todo elemento colado nas bordas, sempre somado a um mínimo seu. Em aparelho sem recorte esse recuo vale zero, e sem o mínimo o botão encosta na borda.

Quem pula esse cuidado vê o botão de confirmar meio escondido atrás da barra de gestos. O toque abre o menu do sistema em vez de confirmar o pedido. O defeito quase nunca aparece no seu aparelho, porque o tamanho do recorte muda de modelo para modelo.

O dedo cobre uma área bem maior que o ponto tocado, e três normas dizem o tamanho do alvo. Alvo aqui é o retângulo sensível ao toque, não o desenho do ícone.

São 24 por 24 pixels no piso, critério 2.5.8 da WCAG 2.2 no nível AA. A Apple pede 44 e o Android pede 48.

A parte que quase todo mundo esquece é o espaço entre um alvo e o vizinho. Três alvos de 24 pixels colados passam no piso e continuam errados, porque o dedo cobre os três de uma vez.

Com 8 pixels de distância, o mesmo trio funciona. Quando o ícone precisa ser pequeno, aumente a área tocável pelo espaçamento interno, sem redesenhar o ícone.

O formulário é onde o celular cobra mais caro pelo descuido, porque cada campo errado custa toques a mais. Duas escolhas decidem quase tudo: o modo de entrada (inputmode), que define qual teclado sobe, e o preenchimento automático (autocomplete), que deixa o navegador completar o campo sozinho.

A armadilha mais comum é usar campo do tipo número para CPF, CEP e cartão. Esse tipo traz setas de aumentar e diminuir e perde o zero à esquerda do CEP, e nenhum dos três é um número que você vá somar. Use campo de texto com modo de entrada numérico, e o teclado certo sobe sem efeito colateral.

O preenchimento automático do código recebido por mensagem resolve o pior momento do formulário. O teclado oferece o código do SMS acima das teclas, e a pessoa não sai do site.

Quatro regras do manual de setembro de 2026 fecham a tela de celular. A primeira é a densidade, o espaço entre linhas e botões, que muda conforme o breakpoint, a largura em que o layout troca de arranjo. Apertada no computador e folgada no celular, porque um valor único erra num dos dois.

A segunda é o tema escuro feito de tokens, que são valores de cor guardados com nome, como a etiqueta na lata de tinta. Esses valores trocam de papel entre os dois temas. Cor fixa escrita em cada elemento é o que quebra no escuro. O peso da fonte sobe um degrau sobre fundo escuro, porque o traço fino some.

Terceira regra: toda janela modal tem fechamento visível e tocável, com alvo de 44 pixels, porque o gesto de tocar fora ninguém descobre sozinho.

A quarta é o campo que cresce com o conteúdo, entregue pelo field-sizing. Sem suporte, a caixa fica na altura fixa e rola por dentro.

Abra a tela mais importante do site no seu celular e role até o fim. Veja se a página pula quando a barra do navegador some e se algum botão fica fora da área visível. Testar só no computador, em modo de simulação, esconde esse defeito.

Meça os três menores botões e a distância entre eles na ferramenta de inspeção do navegador. Leve cada alvo a 44 pixels pelo espaçamento interno, sem redesenhar o ícone. Num botão de confirmar horário preso ao rodapé, é a altura dinâmica que impede a queda fora da área visível.

Troque CPF, CEP e cartão do tipo número para texto com modo de entrada numérico e confira se o zero à esquerda do CEP sobrevive. Está pronto quando nada se esconde atrás da barra e nenhum toque erra o alvo.

Faça o cartão se ajustar sozinho ao espaço que recebeu

Resolvida a medida da tela do aparelho, o layout passa a ser decidido pelo espaço de cada componente, com subgrid, alvenaria e consulta de suporte.

Um componente, que é o pedaço de tela repetido muitas vezes, como o cartão de produto, decide sozinho o layout pelo espaço que recebe, sem nenhuma programação. Com isso ele deixa de existir em duas versões separadas, uma para a lista e outra para a página interna.

Sete recursos nativos entregam esse cartão único. A seguir, o que cada um faz, o problema que ele tira da sua frente e o desenho de reserva para onde ainda não roda.

A container query é a pergunta sobre o espaço que o componente recebeu, e não sobre o tamanho da tela. Isso muda quem decide: o elemento que segura o cartão informa a largura disponível, e o cartão escolhe o arranjo.

Na prática, o cartão empilha imagem e texto quando recebe menos de 340 px. Acima disso, põe os dois lado a lado, com a mesma marcação em qualquer página. Num cartão de imóvel, isso apaga a segunda versão do componente, hoje mantida só para a lista de resultados.

A armadilha é declarar a consulta dentro do próprio cartão. Quem pergunta pelo espaço é sempre o elemento de fora, nunca ele mesmo.

Já a style query pergunta pelo valor de um token, o ajuste guardado com nome como a etiqueta na lata de tinta, em vez de perguntar pela largura. Você guarda ali a densidade que quer e o cartão aperta ou afrouxa sozinho. Onde ela ainda não roda, o cartão fica na densidade confortável.

Grade, aqui, é o arranjo invisível de linhas e colunas que alinha os elementos da página. Subgrid é a grade filha que herda as linhas e colunas da grade de cima.

É ele que faz título, preço e botão de cartões vizinhos caírem na mesma altura, mesmo quando um título ocupa duas linhas e o outro, uma.

O plano B antigo era altura mínima fixa, que sobra espaço num cartão e corta texto no outro.

Grade em alvenaria é a galeria de alturas diferentes que se encaixa sem buraco, como a estante de caixas de tamanhos variados. Até 2026 ela exigia biblioteca, o pacote de código pronto, medindo cada bloco; agora a sintaxe grid-lanes faz isso dentro do próprio Grid.

Onde ela ainda não chegou, a grade comum deixa vãos entre as linhas e todos os blocos continuam visíveis.

Altura que anima de auto era o outro caso que obrigava a instalar biblioteca. Com interpolate-size e calc-size(), o navegador consegue animar até valores como auto, e o detalhamento de um pedido abre com transição escrita em duas linhas de CSS. Use em bloco pequeno, porque animar a página inteira faz o celular engasgar.

A outra troca é a ordem de leitura. Com reading-flow, a tecla Tab segue a ordem visual da grade, e o leitor de tela acompanha, sem reescrever a marcação. A armadilha é reordenar só pelo CSS, sem reading-flow: quem navega por teclado pula de um canto ao outro da tela sem entender por quê.

Dois ajustes de tipografia fecham o cartão. O text-box-trim remove o espaço fantasma que a fonte deixa acima e abaixo da letra, e o título passa a alinhar com o ícone sem margem negativa.

O text-wrap: pretty evita a palavra órfã sozinha na última linha do parágrafo. Onde falta suporte, o texto quebra na linha padrão e ninguém percebe a diferença.

Para ordenar o que vale adotar primeiro, sirva-se do Interop 2026, o acordo anual em que os fabricantes de navegador combinam o que vão implementar juntos. Ele lista 19 áreas de foco, 11 delas de CSS.

É assim que se organiza a melhoria progressiva: uma base que funciona em todo lugar e o enfeite só onde o navegador aceita. O critério para adotar cabe em duas frases. Use o recurso nativo atrás de uma consulta de suporte, desde que o desenho de reserva ainda cumpra a função. Segure a biblioteca para quando esse desenho quebra.

Escolha o componente que mais se repete no site e peça os sete recursos numa conversa só com o agente. Diga que o cartão da lista e o da página interna são o mesmo, e que o arranjo reage ao espaço recebido, não ao tamanho da tela.

Peça também que título, preço e botão caiam na mesma altura em todos os cartões da fileira, por subgrid. Altura mínima fixa no lugar dele sobra espaço num cartão e corta texto no outro.

Antes de aceitar a entrega, abra a página no celular mais antigo que você tiver. Está pronto quando cada recurso está atrás de uma consulta de suporte e nada some sem ele.

Guia prático: zonas seguras e piso de texto conferidos por script

No celular, o defeito que passa pela revisão é o texto que existe mas não se lê: pequeno demais, cortado no fim da linha ou escondido atrás da interface de quem exibe a página. Olhar a tela não pega isso, porque o olho completa o que falta. O curso de edição de vídeo estudado em 07/10/2026 resolve com dois limites escritos em número e um script que confere.

O primeiro limite são as zonas seguras. No vídeo vertical de 1080 por 1920 pixels, nada importante entra nos 220 pixels de cima nem nos 380 de baixo, onde o aplicativo põe nome do perfil, legenda, botões e descrição. O segundo é o piso de texto: 22 pixels para o que a fala cita e 18 para o resto, com um verificador que reprova qualquer texto abaixo de 17,5. A página tem as mesmas faixas reservadas: barra do navegador, barra fixa de cookies, botão flutuante de WhatsApp e barra de gestos.

Os templates mostram o tamanho do problema. Nos 51 sites medidos, 26 usam rótulos de 9 a 11 pixels, o tamanho do texto em caixa alta acima dos títulos. Um deles, o totem de restaurante, desliga o zoom com user-scalable=no; a documentação da MDN avisa que isso impede quem tem baixa visão de ampliar a página, e que a WCAG pede ampliação de pelo menos duas vezes. A lição: escreva o limite com número e deixe um script medir cada caixa de texto, em vez de confiar na impressão de que está legível.

Aplicar os recursos ao projeto