가상 키패드가 활성화 되기 전의 전체 높이 값을 기준으로 구현된 UI에서 가상 키패드 활성화로 인해 전체 높이 값이 절반 가까이 줄어든 것이 원인
이 상황에서 고정 위치를 가지는 요소들이 아닌 경우는 스크롤을 통해 자연스러운 위치를 유지하지만 예외적으로 fix된 요소들은 위치가 가상 키패드 기준으로 위치가 변경되어 부자연스러운 CSS 이슈 발생
✔ 해결 과정
가상 키패드가 활성화 되는 페이지에서는 각각의 useLayoutEffect를 활용한 예외 상황의 CSS 로직이 필요하다 판단하여 구현
useLayoutEffect(() => {
const detectMobileKeyboard = () => {
const activeElement = document.activeElement;
// 전체 높이가 줄어듬에 따른 스크롤 발생으로 인해 가상 키보드 활성화시 요소 포커싱 및 뷰 자동 스크롤 적용
activeElement.focus();
activeElement.scrollIntoView({ block: 'end' });
// 예외상황에 따른 스타일 지정이 필요한 요소 CSS 처리
// 1차적으로 이슈 해결한 방법은 가상 키보드가 활성화 된 상황에서는 버튼 요소를 안보이게 처리
buttonRef.current.style.display =
buttonRef.current.style.display === 'none' ? 'block' : 'none';
};
// 이벤트 등록
// 모바일 웹 뷰의 경우 resize 가능한 요인이 현재는 가상 키보드 활성에 따른 경우만 발견
// 모바일에서 확대 및 축소의 경우는 해당사항 없음을 발견
window.addEventListener('resize', detectMobileKeyboard);
// 등록한 이벤트를 반드시 클린업
return () => window.removeEventListener('resize', detectMobileKeyboard);
}, []);
1차 해결
✨ Reference
모바일 기기에서 확인을 하는게 가장 확실하지만 1차적으로 보이는 전체 뷰의 경우 개발자 도구에서 모바일 뷰 전환 후 Nexus 5, Nexus 5X로 선택하면 가상 키보드 활성화 가능합니다.
