5 Pequenos Problemas da Web Mobile (e Como Corrigi-los)

Você testou seu layout em todos os breakpoints, sua grid responsiva está impecável e tudo funciona perfeitamente no Chrome DevTools. Então você abre o site em um telefone real e algo está ligeiramente, teimosamente errado. Estes são os pequenos problemas da web mobile — bugs menores que não quebram a página, mas silenciosamente degradam a experiência.

Aqui estão cinco que aparecem repetidamente em projetos reais, e as correções modernas para cada um.

1. Layouts de Altura Total Quebram Por Causa do 100vh

Sintoma: Um hero em tela cheia ou modal fica ligeiramente alto demais no Safari do iOS, causando corte de conteúdo ou aparecimento de barra de rolagem.

Por que acontece: 100vh é calculado contra a altura total da viewport, ignorando o chrome de UI dinâmica do navegador (barra de endereço e controles de navegação). Quando esses elementos estão visíveis, 100vh transborda.

A correção: Use as unidades de viewport CSS mais recentes. Para a maioria dos layouts de altura total, 100svh (small viewport height) é uma escolha estável porque representa a área visível com a UI do navegador presente. Use 100dvh quando você quiser que o layout redimensione dinamicamente conforme o chrome do navegador se oculta e exibe. O suporte dos navegadores modernos para essas unidades está amplamente disponível, como mostrado em https://webstatus.dev/features/viewport-unit-variants.

.hero {
  height: 100svh; /* padrão estável */
}

2. UI Fixa na Parte Inferior Fica Oculta Atrás das Áreas Seguras do Dispositivo

Sintoma: Um rodapé fixo, barra de navegação inferior ou botão de ação fica parcialmente obscurecido pelo indicador home no iPhone ou por outras áreas seguras do dispositivo.

Por que acontece: Elementos fixos posicionados em bottom: 0 ficam alinhados com a borda da viewport, não com a área segura do dispositivo. Em dispositivos com indicadores home ou cantos arredondados, a UI do sistema pode sobrepor o elemento.

A correção: Adicione viewport-fit=cover à sua meta tag viewport, então use variáveis de ambiente de área segura CSS como env(safe-area-inset-bottom) para empurrar o elemento para cima.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
}

3. iOS Aplica Zoom em Inputs de Formulário

Sintoma: Tocar em um <input> no Safari do iOS faz com que a página aplique zoom inesperadamente, interrompendo o layout.

Por que acontece: O Safari do iOS aplica zoom automaticamente quando o tamanho da fonte de um input é menor que 16px, tratando isso como um auxílio de legibilidade.

A correção: Defina font-size: 16px (ou maior) em todos os inputs. Não desabilite o zoom via user-scalable=no — isso prejudica a acessibilidade. Enquanto estiver nisso, use inputmode para solicitar o teclado correto, autocomplete para reduzir o atrito, e enterkeyhint para rotular a tecla return.

<input
  type="email"
  inputmode="email"
  autocomplete="email"
  enterkeyhint="done"
  style="font-size: 16px;"
/>

4. Scroll Vaza Para Fora de Modais e Drawers

Sintoma: Quando um usuário rola dentro de um modal ou bottom sheet e chega ao fim, a página atrás dele também começa a rolar.

Por que acontece: Isso é encadeamento de scroll — o navegador propaga eventos de scroll para o pai quando o container de scroll filho atinge seu limite.

A correção: Aplique overscroll-behavior: contain ao container com scroll. O suporte dos navegadores modernos é amplo, incluindo Safari 16 e posteriores, como mostrado em https://webstatus.dev/features/overscroll-behavior.

.modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
}

5. Alvos de Toque Parecem Não Responsivos ou Acionam o Elemento Errado

Sintoma: Botões parecem lentos, ou toques são registrados no elemento errado — especialmente em UIs densas como menus de navegação ou listas.

Por que acontece: Alvos de toque muito pequenos criam ambiguidade no teste de toque. Navegadores modernos lidam com eventos de toque sem o histórico atraso de 300ms (desde que sua meta tag viewport esteja correta), mas alvos subdimensionados ainda causam toques perdidos ou mal direcionados.

A correção: Procure ter alvos de toque em torno da recomendação de tamanho de alvo WCAG de aproximadamente 44×44 pixels CSS. Use padding em vez de margin para expandir a área de toque sem afetar o layout.

.nav-link {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
}

Conclusão

Esses pequenos problemas da web mobile raramente aparecem isoladamente — um layout que corta, um botão que se oculta, um formulário que aplica zoom. Cada um é menor por si só, mas juntos sinalizam um site que não foi realmente testado em um dispositivo. O CSS moderno oferece ferramentas limpas e baseadas em padrões para resolver todos eles. Aplique essas correções uma vez e elas se manterão conforme os navegadores evoluem.

Perguntas Frequentes

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..