Quando 100vh Mente: Corrigindo Problemas de Viewport em Dispositivos Móveis

Você constrói uma seção hero de altura total. Ela fica perfeita no Chrome DevTools. Você abre no seu celular e o conteúdo inferior está cortado — o botão de CTA que você passou tempo posicionando está escondido atrás da barra de endereços do navegador. Parece familiar?

Isso não é mais uma peculiaridade exclusiva do Safari. É uma consequência de como as unidades de viewport são fundamentalmente definidas, e afeta Chrome, Firefox e Samsung Internet em dispositivos móveis também.

Por Que 100vh Mente em Dispositivos Móveis

A causa raiz se resume a dois conceitos diferentes de viewport:

• Layout viewport: o que o navegador usa para calcular comprimentos CSS, incluindo vh
• Visual viewport: o que o usuário realmente vê na tela

Os navegadores móveis intencionalmente mantêm o layout viewport fixo mesmo quando a barra de endereços e a barra de ferramentas de navegação se retraem durante a rolagem. Isso significa que 100vh é calculado contra o estado de barra de ferramentas expandida — o viewport grande — e esse valor é maior do que a tela visível quando a página carrega inicialmente.

Isso não é um bug. A especificação CSS define vh como equivalente a lvh (large viewport height). O navegador está se comportando corretamente. Seu layout simplesmente não leva isso em conta.

É por isso que a emulação móvel do DevTools parece boa: ela não simula a interface dinâmica do navegador. A barra de endereços nunca se retrai em um simulador.

O Impacto no Mundo Real

• Seções hero transbordam de 56–80px no carregamento inicial
• Rodapés fixos ficam obscurecidos pela barra de navegação
• Modais em tela cheia cortam conteúdo na parte inferior
• Layouts saltam quando as barras de ferramentas se retraem no meio da rolagem (se você estiver usando dvh)

Correções Modernas: svh, dvh e lvh

O CSS agora oferece três unidades explícitas de altura de viewport que correspondem a diferentes estados de barra de ferramentas:

Para a Maioria das Seções de Altura Total: Use svh

.hero {
  height: 100vh;     /* Fallback para navegadores antigos */
  height: 100svh;    /* Ajusta-se dentro da tela visível no carregamento */
}

100svh dimensiona o elemento para o viewport menor possível — o que significa que ele se ajusta mesmo quando as barras de ferramentas estão totalmente visíveis. Sem transbordo, sem corte.

Quando Você Quer Ajuste Dinâmico: Use dvh com Cuidado

.full-height {
  height: 100vh;     /* Fallback */
  height: 100dvh;    /* Redimensiona conforme as barras de ferramentas se retraem */
}

Aviso: dvh recalcula conforme a interface do navegador muda durante a rolagem. Isso pode causar mudanças visíveis de layout e repinturas. Não é o padrão correto para a maioria das seções hero ou modais — use apenas quando você explicitamente quiser que o elemento redimensione com o estado da barra de ferramentas.

Suporte dos Navegadores

svh, dvh e lvh são suportados no Chrome 108+, Safari 15.4+ e Firefox 101+. Combinados, isso cobre mais de 90% dos usuários globalmente. Para navegadores mais antigos, o fallback de 100vh cuida do resto.

Casos Extremos Que Vale a Pena Conhecer

Inserções de área segura: Em displays edge-to-edge (notch do iPhone/Dynamic Island), combine unidades de viewport com env(safe-area-inset-bottom) para evitar que o conteúdo fique atrás da interface do sistema:

.hero {
  height: 100svh;
  padding-bottom: env(safe-area-inset-bottom);
}

Teclado na tela: O teclado virtual afeta principalmente o visual viewport, e sua interação com o dimensionamento do layout viewport pode variar entre navegadores e WebViews. Isso é separado das unidades de viewport orientadas por barras de ferramentas e pode exigir manipulação JavaScript ou a API VirtualKeyboard como um aprimoramento progressivo.

WebViews e navegadores incorporados: Navegadores dentro de aplicativos (Instagram, LinkedIn) frequentemente têm comportamento de viewport não padrão. Teste em dispositivos reais, não apenas em navegadores do sistema.

Conclusão

Pare de usar 100vh como seu padrão para layouts móveis de altura total. Use 100svh para seções estáveis que precisam se ajustar à tela visível no carregamento. Reserve 100dvh para casos em que o redimensionamento dinâmico é intencional. A nova família de unidades de viewport existe precisamente porque o comportamento antigo sempre foi um compromisso — agora você tem as ferramentas para ser explícito sobre o que você realmente quer.

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..