Мобильная клавиатура перекрывает интерфейс и не позволяет пользователю прокручивать страницу

Поддержка
4

Вот что сработало для меня (в моей теме):

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`;
      }
    });
  }

Эти изменения значительно улучшают пользовательский опыт:

  • ограниченное пространство экрана отводится под текущую задачу (поля ввода), а не делится между модальным окном и фоном
  • поля не скрываются клавиатурой, и пользователь может прокручивать страницу
  • пользователю не нужно закрывать, затем открывать, затем снова закрывать и открывать клавиатуру, чтобы заполнить все поля
  • пользователю не приходится вводить текст вслепую в поле, которое он не видит

По-прежнему наблюдается некоторая несогласованность между браузерами. JS-изменение размера, похоже, не работает в Chromium, но работает в Brave и Firefox. Однако даже в Chromium опыт улучшается благодаря тому, что модальные окна находятся в верхней части экрана, где нет клавиатуры.

Почему чистые CSS-подходы не сработали:

  • Я не думаю, что env(keyboard-inset-height) работает вне PWA на iOS
  • 100dvh теоретически должно работать, но, похоже, пока не поддерживается в моем мобильном браузере

Также я слышал от людей, что они не могли найти кнопку регистрации. Поэтому:

Отображать кнопку регистрации всегда, не скрывать её на мобильных устройствах:

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

Все эти проблемы мешали людям регистрироваться на форуме и создавать свои первые сообщения. Поэтому, хотя это может звучать просто, для меня, по крайней мере, это были исправления высочайшего приоритета.