모바일 키보드가 인터페이스를 가려 스크롤을 할 수 없습니다

제품 지원
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`;
      }
    });
  }

이러한 변경 사항으로 훨씬 더 나은 UX를 얻을 수 있습니다:

  • 제한된 화면 공간을 배경과 모달로 나누어 사용하는 대신, 현재 작업(입력 필드)에 집중할 수 있습니다.
  • 키보드로 필드가 가려지는 문제가 없어 사용자가 스크롤할 필요가 없습니다.
  • 모든 필드를 채우기 위해 키보드를 여러 번 닫았다가 다시 열 필요가 없습니다.
  • 보이지 않는 필드에 눈감고 타이핑할 필요가 없습니다.

아직 브라우저 간 일관성 문제가 남아 있습니다. JS 리사이즈가 Chromium에서는 작동하지 않는 것 같지만, Brave와 Firefox에서는 작동합니다. 하지만 Chromium에서도 키보드가 없는 화면 상단에 모달이 위치하기 때문에 경험은 여전히 더 좋습니다.

순수 CSS 접근법이 작동하지 않은 이유:

  • env(keyboard-inset-height)는 iOS에서 PWA를 제외하고는 작동하지 않는다고 생각합니다.
  • 100dvh는 이론상 작동할 수 있지만, 제 모바일 브라우저에서는 아직 지원되지 않는 것 같습니다.

또한 가입 버튼을 찾지 못했다는 피드백도 받았습니다. 그래서 다음과 같이 수정했습니다:

모바일에서 가입 버튼을 숨기지 않고 항상 표시:

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

이 모든 문제들이 사람들이 포럼에 가입하고 첫 번째 글을 작성하는 것을 방해하고 있었습니다. 따라서 단순해 보일지라도, 적어도 제 경우에는 매우 높은 우선순위의 수정 사항이었습니다.