iOS, 안드로이드 크롬 100vh 레이아웃 깨짐 문제

ios에서 100vh를 정상적으로 인식하지 못하는 문제가 발생함.

 

자바스크립트로 높이를 다시 계산하는 방법으로 IOS는 해결했으나

 

안드로이드 크롬에서 주소창이 숨겨진것 기준으로 vh가 잡혀버리는 문제 발생

 두개가 서로 상반된 원인이라 해결하려면 사용자 디바이스에 따라 코드를 2개를 짜서 해야하는데, 

 

이 부분이 반응형 웹을 구현하면서 자연스럽게 해결될것으로 예상되어서, 우선 심각한 ios문제만 수정하였습니다 .

우선
아래 코드를 타입스크립트 부분에 추가하고

  const setVH = () => {
    const vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
  };

  window.addEventListener('resize', setVH);
  setVH();

CSS부분을 아래와 같이 수정하였습니다.

(기록을 위해 적어둡니다!)