Teclado móvel cobre a interface e não permite que o usuário role

Suporte
4

Este foi o que funcionou para mim (no meu tema):

custom.scss:

.mobile-view .modal {
  top: 0;
  height: 100vh;
  align-items: flex-start;
}
.mobile-view .modal .d-modal__container {
  height: 100vh;
}

.mobile-view #reply-control.open {
  top: 0;
  height: 100vh;
}

common/head_tag.html:

  const is_mobile = !!document.querySelector('.mobile-view')
  if (window.visualViewport && is_mobile) {
    window.visualViewport.addEventListener('resize', () => {
      const modal = document.querySelector('.mobile-view .modal .d-modal__container');
      if (modal) {
        modal.style.maxHeight = `${window.visualViewport.height}px`;
      }
      const dialog = document.querySelector('.mobile-view #reply-control.open');
      if (dialog) {
        dialog.style.maxHeight = `${window.visualViewport.height}px`;
      }
    });
  }

Essas alterações resultam em uma experiência do usuário muito melhor:

  • o espaço limitado da tela é dedicado à tarefa em questão (campos de entrada) em vez de ser dividido entre o modal e o fundo
  • os campos não ficam ocultos pelo teclado, com o usuário incapaz de rolar
  • o usuário não precisa fechar, depois abrir, depois fechar, depois abrir o teclado para preencher todos os campos
  • o usuário não precisa digitar às cegas em um campo que não consegue ver

Ainda há alguma inconsistência entre os navegadores. O redimensionamento em JS não parece funcionar no Chromium, mas funciona no Brave e no Firefox. Mas a experiência no Chromium ainda é melhor com os modais no topo da tela, onde o teclado não está.

Por que as abordagens puramente CSS não funcionaram:

  • Acho que env(keyboard-inset-height) não funciona fora de PWAs no iOS
  • 100dvh em teoria funcionaria, mas ainda não parece ser suportado no meu navegador móvel

Também ouvi de pessoas que não conseguiam encontrar o botão de inscrição. Então:

Exiba o botão de inscrição o tempo todo, não o oculte no celular:

.panel .header-buttons .sign-up-button {
  display: inline-flex;
}

Todos esses problemas estavam impedindo as pessoas de se inscreverem no fórum e de fazerem sua primeira postagem. Portanto, embora possa parecer simples, para mim, pelo menos, essas foram correções de altíssima prioridade.

1 curtida