모바일 ios 이슈) 키보드가 버튼, Input 가리는 현상

현상: ios에서 키보드는 input기준 아래에서 올라옴. textarea, input이 화면 상단에 위치하는 경우 키보드가 화면 요소를 가리는 이슈가 생길 수 있음

 

 

ios에서는 다르게  컨트롤 해야될 대상

- vh(vh가 먹지않음)

- window.innerHeight(키보드 올라옴에도 innerHeight가 그대로임) 대신 visualViewport.height로 사용

 

visualViewport가 변할 때마다 

document에 css 변수를 선언해 

height를 동적으로 부여합니다.

document.documentElement.style.setProperty('--vh', `${ window.visualViewport.height * 0.01 }px`);

 

 

.target {
	height: calc(--vh) * 100;
}

 

 

추가로 키보드에 가려진 버튼을

visualViewPort 값이 바뀔 때마다 

키보드 위로 올려줘야 함

 

const 올려줄값 = window.innerHeight - window.visualViewport.height;