O problema com vh no mobile

#css #braziliandevs #webdev #beginners

Olá, tudo bem? Sabe aquela coisa chata de quando você coloca um min-height: 100vh no seu body e no mobile ele fica com um scroll sem nenhum motivo aparente? Realmente é uma coisa bem irritante e que antigamente era complicada de ser resolvida sem uma certa "gambiarra". Mas vamos começar do começo!

Para caso não saiba, o "vh" do css é uma unidade relativa a 1% do viewport do usuário, porém essa viewport inclui todo o navegador, desconsiderando por exemplo elementos que possam estar cobrindo a tela (como é o caso de celulares)

Por isso funciona no desktop, mas em mobile deixa um scroll!

Já a medida "svh" é o equivalente a "small viewport height", ou seja 1% do menor viewport considerando justamente os elementos que possam cobrir a tela como a barra de endereços do mobile.

Ou seja, perfeito pra celulares pois é muito mais preciso para o que o usuário vê!

Já o "lvh" (large viewport height) é o exato oposto, ele pega o maior viewport possível, desconsiderando a barra de endereços ou uma UI que possa estar cobrindo a tela.

Para desktop ele funciona muito bem como pode imaginar, mas pra mobile depende do seu caso de uso. 🤔

Afinal, um é bom pra desktop e outro bom pra celular, eu teria que usar uma media query pra adaptar então??

Não :D

Felizmente também existe o "dvh" (dynamic viewport height) que se ajusta de acordo com o dispositivo, agindo tanto como svh ou dvh de acordo com o necessário.

Entretanto alegria de pobre dura pouco, e eles ainda não estão disponíveis em todos os navegadores :(

O firefox e IE por exemplo ainda não possuem suporte...

Por isso, eu recomendo usar porém junto de um fallback! Se liga na dica:

body {
  /*
   primeiro você usa o fallback: vh
  */
  min-height: 100vh;

  /*
    e em seguida, você usa a versão nova!
    pois caso ela não funcione, será ignorada e
    o vh informado anteriormente será usado no lugar
  */
  min-height: 100dvh;
}