[Front-end] 모바일 디바이스에서 키보드 자판이 올라오거나 내려가는 경우 감지하기

visualViewport

visualViewport는 브라우저의 Visual Viewport API를 통해 제공되는 객체로, 사용자가 현재 보고 있는 웹 페이지의 뷰포트에 대한 정보를 제공합니다. 이 API는 특히 모바일 장치에서 유용하며, 사용자가 페이지를 확대하거나 축소할 때 뷰포트의 크기와 위치를 추적할 수 있습니다.

visualViewport 객체는 다음과 같은 주요 속성을 제공합니다:

• width: 사용자가 보고 있는 뷰포트의 너비 (CSS 픽셀 단위)
• height: 사용자가 보고 있는 뷰포트의 높이 (CSS 픽셀 단위)
• offsetLeft: 뷰포트의 왼쪽 가장자리와 레이아웃 뷰포트의 왼쪽 가장자리 사이의 거리 (CSS 픽셀 단위)
• offsetTop: 뷰포트의 상단 가장자리와 레이아웃 뷰포트의 상단 가장자리 사이의 거리 (CSS 픽셀 단위)
• scale: 현재의 확대/축소 비율

visualViewport는 뷰포트의 크기나 위치가 변경될 때 발생하는 이벤트를 제공합니다. 대표적인 이벤트는 다음과 같습니다:

• resize: 뷰포트의 크기가 변경될 때 발생
• scroll: 뷰포트의 위치가 변경될 때 발생

innerHeight

window.innerHeight는 브라우저 창의 뷰포트 높이를 반환하는 읽기 전용 속성입니다. 이 값은 CSS 픽셀 단위로 측정되며, 브라우저의 툴바와 스크롤바를 제외한 영역의 높이를 나타냅니다.

브라우저에서 상단바를 제외한 높이라고 보시면됩니다.

모바일 기기에서 키보드가 올라온 경우

Keyboard 가 올라오게되면 visualViewport 에서 resize 이벤트가 발생합니다.

우리는 이를 감지하여 키보드가 올라왔다는 것을 판단할 수 있습니다.

이때 "키보드가 올라오는 상황에서 발생한 resize 이벤트" 인지, "내려가는 상황에서 발생한 resize" 인지 구별할 필요가 있습니다.

키보드가 올라오게되면 innerHeight 값보다 visualViewport.height 값이 작아지게되므로 이를 이용해 키보드가 올라오는 것을 판단할 수 있습니다.

예시 코드

const handleVisualViewportResize = () => {
  const isKeyboardUp = visualViewport && window.innerHeight > visualViewport?.height;

  // do something with isKeyboardUp
};

onMounted(() => {
  visualViewport?.addEventListener('resize', handleVisualViewportResize);
});

onBeforeUnmount(() => {
  visualViewport?.removeEventListener('resize', handleVisualViewportResize);
});

 

 

오늘은 모바일 디바이스에서 키보드 자판이 올라오거나 내려가는 경우를 visualViewport 와 innerHeight 를 이용해 구별해보았습니다.

읽어주셔서 감사합니다~!