이 문제는 여전히 상당히 심각하며, 가입, 로그인, 게시물 작성/수정 시 사용자들에게 영향을 미치고 있습니다. 스마트폰과 태블릿 모두에서 이러한 현상을 직접 목격했습니다. 태블릿 중 적어도 하나는 iOS 기기였던 것 같지만, 주로 Android 기기에서 이 문제를 관찰하고 있습니다.
제 포럼은 지역 기반이므로, 사람들이 실제로 포럼을 사용하는 모습을 자주 직접 볼 수 있습니다.
현재로서는 CSS로 해결하는 방식에 개방적이며, 근본적인 수정이 코어에 반영되는 것이 좋을 것입니다. 해결책을 찾으면 여기서 업데이트하겠습니다.
Don의 CSS 수정을 시도해 보셨나요?
제가 성공적으로 적용한 방법(테마 내에서):
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;
}
이 모든 문제들이 사람들이 포럼에 가입하고 첫 번째 글을 작성하는 것을 방해하고 있었습니다. 따라서 단순해 보일지라도, 적어도 제 경우에는 매우 높은 우선순위의 수정 사항이었습니다.
두 코드 세트를 모두 시도해 테스트해야 할 것 같습니다. 폼 템플릿을 편집하거나 테마 편집기를 사용해 CSS/HTML을 수정할 때 이 문제가 발생하기 때문입니다. 빈 줄을 여러 개 추가하는 방식으로 해당 문제에 대한 임시 해결책을 찾았습니다. 이 CSS 수정안들이 훨씬 더 좋아 보입니다.
팀이 이미 그 작업에 착수한 것 같습니다.
관심을 받는 것은 좋은 일이지만… 내가 언급했듯이 dvh는 제 테스트에서는 작동하지 않습니다.
안녕하세요 @bitmage, 안드로이드에서 겪고 있는 문제의 스크린샷을 올려 주시겠어요? 아니면 영상이나. 같은 문제에 대해 이야기하고 있는지 확인하고 싶어요. 감사합니다!