Layouts full-page com height 100% ou 100% da viewport.

[felquis]

Olá pessoal, vocês tem alguma experiência para compartilhar relacionado a layouts que ocupam 100% da tela? 📱💯 a gente chama isso de full-page layout, full-height layout etc...

Em 2015 fiz alguns testes e as dificuldades que tive foram:

• Tive problemas com o teclado do celular quando ele aparece
• Quando o teclado aparece, o height:100% não é uma boa ideia
• O height: 100% também variava do iOS para Android por causa do header do próprio browser.
• Quando o teclado abre, o footer da página pode continuar fixo ou não, depende da página que está fazendo.
• Mesmo com header e footer fixos, pode ser que o conteúdo da página em celulares muito pequenos tipo 320x420 precise de scroll de qualquer forma.

Eu não tenho um codepen para compartilhar agora, mas quero lançar esse pedaço de discussão para aprender com vocês, se você tem alguma experiência, alguma técnica que usou que foi muito boa, compartilha com a gente.

Links para discussões do forum, links para artigos e repositórios são bem vindos, até mais 😁

[caioincau]

http://bem-vindo.moip.com.br/

Fizemos esse projeto nessa pegada, sem footer foi de boa fazer.

Tivemos que sacrificar algumas ideias para comportar melhor os elementos e quando necessário, fazemos scroll interno dentro do container.

[bizarro]

Acho que todos os projetos que eu fiz nos últimos meses foram 100% da tela, na real é coisa que você só vai aprendendo conforme o tempo, por exemplo:

• Tem um bug muito conhecido no iPad, se você abrir uma aba e fechar ela, o height e o width do seu site vão ficar errados, causando umas alterações no layout, então você precisa tratar no visibilitychange ou algum evento do gênero adicionando via style nos elementos principais mesmo.

Algumas outras dicas que eu tenho por experiência própria mesmo e é totalmente minha opinião:

• Utilizar 100% no html e no body e também nos elementos filhos, nunca usar vh e vw, eles costumam dar problema no iOS por causa das barras de navegação.
• Uma coisa bem importante também é colocar position: fixed no body e html, eles desabilitam o efeito de overscroll do iOS, evitando possíveis problemas quando o usuário tenta rolar a página.
• Se você precisar de rolagem em alguma seção, a melhor maneira de verdade é criar um elemento com overflow: scroll e -webkit-overflow-scrolling: touch.
• Nunca usar e.preventDefault no touchmove de quase nenhum elemento, existem raras exceções como canvas, mas geralmente ele trava a rolagem que eu citei acima.
• Essa coisa de abrir o teclado é sempre um problema, em algum dos projetos que eu participei a solução de um desenvolvedor foi checar se era um input que estava tendo foco no window e aí fizemos o tratamento via JavaScript para impedir problemas de quebra de layout.

Pelo que eu me lembre de cabeça, é isso, mas essas coisas já resolvem bastante problemas. 😅 Conforme eu for lembrando vou postando aqui.