모바일 디바이스에서 키패드 활성화 여부 확인하기

June 26, 2023 · 2 min read

모바일 디바이스에서 키패드의 활성화 여부를 체크하기 위해서는 사용자에게 보여지는 화면의 영역에 대한 뷰포트의 사이즈를 체크하여 확인할 수 있다. 해당 값은 window.innerHeight의 값을 확인할 수 있는데, aos의 경우, 키패드가 활성화된 경우 뷰포트가 키패드 위로 줄어들면서 해당 값이 변화하게 되지만, ios의 경우에는 키패드가 활성화되더라도 해당 값은 동일하게 되지만, window.visualViewport.height 값은 키패드가 제외된 화면의 영영의 사이즈를 의미한다

그러므로 아래와 같이 작성하여 키패드 활성화 유무를 판단할 수 있다.

const webViewHeight = useRef < number > 0;

const isIOS = () => {
  const agent = navigator.userAgent || navigator.vendor;
  return /iPad|iPhone|iPod/i.test(agent);
};

useEffect(() => {
  const handleVisualViewportResize = () => {
    const viewportHeight = isIOS
      ? window.visualViewport.height
      : window.innerHeight;

    if (webViewHeight.current > viewportHeight) {
      // keypad open
    }
  };

  webViewHeight.current = window.innerHeight;
  window.visualViewport.addEventListener('resize', handleVisualViewportResize);

  return () => {
    visualViewport.removeEventListener('resize', handleVisualViewportResize);
  };
}, []);

References​

References