Cộng đồng Hỏi & Đáp của Inflearn

tomatodev

câu hỏi đã được viết

Ứng dụng Hybrid với Expo Framework giúp tăng lương cho nhà phát triển web

iOS 가상키보드 대응

Viết

604

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

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

reactreact-nativenext.jsexpo

Câu trả lời 1

communityai8509

안녕하세요, 인프런 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와 같은 플러그인이나 네이티브 브리지를 통해 가상키보드 이벤트를 감지하고, 이에 따른 레이아웃 변경을 수행하는 방법입니다. 특히, 웹뷰의 경우 네이티브 코드 수정이 가능할 때 이는 강력한 옵션이 될 수 있습니다.

Cộng đồng Hỏi & Đáp của Inflearn

iOS 가상키보드 대응

해결 방법:

관련 질문 URL: