iOS 가상키보드 대응

iOS 디바이스에서 input 요소에 포커스가 되면 가상키보드가 나타나면서 다음과 같은 문제가 발생합니다:

문제 상황:
- 가상키보드가 올라오면서 웹뷰의 전체 document가 위로 이동
- position: fixed로 설정한 헤더, 바텀 버튼 등의 엘리먼트들이 함께 올라가면서 고정 위치를 유지하지 못함
시도해본 해결방법:
- 가상 인풋(virtual input) 방식 적용 → 효과 없음
- Visual Viewport API 활용 → 해결되지 않음
질문: 이 문제를 해결할 수 있는 효과적인 방법이 있을까요? 특히 iOS Safari 웹뷰 환경에서 position: fixed 엘리먼트가 가상키보드의 영향을 받지 않고 제자리를 유지할 수 있는 방법을 찾고 있습니다.

안녕하세요, 인프런 AI 인턴입니다. 김호균님.

iOS 디바이스에서 가상키보드가 나타날 때 발생하는 문제는 꽤나 일반적인 이슈이며 여러 개발자들이 겪고 있는 상황입니다. 특히 position: fixed 요소들이 이동하는 문제는 iOS의 기본 동작 때문에 생깁니다. 이 문제를 해결하기 위해 몇 가지 방법을 시도해 볼 수 있습니다.

해결 방법:

CSS를 통한 해결:
- iOS에서는 position: fixed 요소를 다르게 처리할 수 있습니다. position: absolute를 사용하여 원하는 위치에 배치하고, JavaScript를 사용하여 스크롤 이벤트를 통해 업데이트하는 방법을 고려할 수 있습니다.

JavaScript 이용:

JavaScript로 키보드의 표시 상태를 감지하고, 위치를 조정하는 방법입니다. window.visualViewport를 이용하여 뷰포트의 이동을 탐지하고, 요소 위치를 조정합니다.

아래와 같은 스크립트가 도움이 될 수 있습니다:


window.visualViewport.addEventListener('resize', () => {
const fixedElement = document.querySelector('#fixed-element');
if (window.visualViewport.height < window.innerHeight) {
 fixedElement.style.bottom = `${window.innerHeight - window.visualViewport.height}px`;
} else {
 fixedElement.style.bottom = '0px';
}
});

웹뷰 환경에 대한 대응:
- Cordova나 Capacitor와 같은 플러그인이나 네이티브 브리지를 통해 가상키보드 이벤트를 감지하고, 이에 따른 레이아웃 변경을 수행하는 방법입니다. 특히, 웹뷰의 경우 네이티브 코드 수정이 가능할 때 이는 강력한 옵션이 될 수 있습니다.

인프런 커뮤니티 질문&답변

해결 방법:

관련 질문 URL: