Evitando que o Teclado Oculte o Campo de Texto no Celular
Dicas práticas para corrigir o problema de campos de texto ocultos pelo teclado em dispositivos móveis
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! 🌈🌟