크로스브라우징(Cross Browsing) - iOS 환경에서 키보드가 화면을 가리는 문제 해결
문제 상황
AutoWini 클레임 프로젝트를 개발하면서 React 프로젝트를 통해 웹, 모바일, 앱에서 채팅 UI가 모두 잘 작동하도록 반응형 웹을 구현해야 했습니다. 대부분의 환경에서는 문제가 발생하지 않았지만, iOS 환경에서는 input이나 textarea를 통해 글자를 입력할 때 키보드가 올라오면서 화면의 너비를 인식하지 못해 키보드에 화면이 가려지는 문제가 발생했습니다.
문제 해결
이 문제를 해결하기 위해 CSS와 JavaScript를 사용하여 화면의 높이가 변할 때 동적으로 vh(viewport height) 값을 재설정하는 방법을 사용했습니다. 구체적인 코드는 다음과 같습니다.
js
/* css */
#viewContainer {
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
}
/* main.tsx */
useEffect(() => {
const resizeListener = () => {
const vh = window.innerHeight * 0.01
document.documentElement.style.setProperty('--vh', vhpx);
};
resizeListener();
window.addEventListener('resize', resizeListener);
return () => {
window.removeEventListener('resize', resizeListener);
};
}, []);문제를 해결하기 위해 참고한 글
[iOS 앱개발] 키보드가 화면을 가릴 때 해결방법! (NotificationCenter)
앞으로의 목표 WebView와 Native 두 마리 토끼를 잡기 위해 React Native를 학습할 생각입니다.
- #ios
- #크로스 브라우징
- #키보드 화면가림
- #프론트엔드 개발자 엄성준
