모바일 브라우저에서 키보드의 높이 확인하기 (detect virtual keyboard open using javascript)

투자사의 앱 내에 당사의 웹페이지를 노출시키는 프로젝트를 진행했다. 기존의 웹페이지가 반응형으로 디자인되어있지 않았기 때문에 모바일 웹으로 재구성이 필요했고, 그 과정에서 키보드 관련 이슈가 있었다.

ios 기기의 브라우저는 키보드가 올라왔을 때 기존의 document 객체를 키보드 높이만큼 밀어 올린다. android 기기의 브라우저는 ios 기기의 브라우저와는 다르게 키보드가 올라왔을 때 screen의 하단에 위치한 contents나 input 등을 키보드가 가리게 되어 사용자가 스크롤을 내려도 전체 내용을 볼 수 없게 된다.

처음에는 키보드가 올라왔을 때 screen의 최하단에 임의로 document를 추가했는데, 높이를 고정 값으로 두었기 때문에 기기별로 빈 공간에 차이가 생겨서 키보드의 높이만큼만 추가되도록 수정했다.

키보드를 확인하는 방법이 두 가지가 있었다.

1. resize event listener
2. css media query

2번의 경우 정확한 키보드의 높이를 반영할 수 없다고 판단해서 1번을 선택했다.
resize event listener는 웹 브라우저에서 화면의 사이즈 변화를 감지한다. 키보드가 올라왔을 때 (화면의 높이에 변화가 생겼을 때) 웹브라우저에서 제공하는 visual viewport API를 사용해서 변화된 높이 (키보드의 높이)를 파악할 수 있다.
다만, 키보드는 화면 하단에서부터 천천히 슬라이딩하며 올라오기 때문에 그 속도에 맞추어 document가 추가될 수 있도록 css를 세팅하면 사용자 경험에 있어서 더 좋을 것 같다.

참고1
참고2
참고3