Evitando que o Teclado Oculte o Campo de Texto no Celular

Olá meus Unicórnios! 🦄✨

Você já deve ter observado que quando o teclado, no celular, é aberto, os elementos do site ficam atrás do teclado.

Isto ocorre porque o teclado virtual do celular altera o viewport, mas não altera diretamente a altura do "<body>".

Isto acaba gerando problemas, principalmente se você esta criando um Chat.

Afinal, não queremos que o campo de digitar fique atrás do teclado.

Para resolver isto é muito simples, basta modificar o "viewport" para incluir "viewport-fit=cover":

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

O "viewport-fit=cover" faz com que a área do site seja é área "visivel", considerando todos os elementos que possam ocultar dados do site.

Por hoje é só, meus unicórnios! 🦄✨

Que a magia do arco-íris continue brilhando em suas vidas! Até mais! 🌈🌟