반응형 웹 모바일 100vh 문제

반응형 웹이 제일 귀찮은 작업같다...

이게 맞는진 모르겠는데 하나하나 media태그를 통해 조건을 다 걸어줘서 모바일버전을 구현하는중이다

 

하지만 구현도중에 핸드폰으로 사이트를 접속했을 때 문제가 생겼다.

 

모바일 화면에선 height 100vh의 기준이 모바일 주소창은 제외라서 원치 않는 스크롤이 생기는 문제이다.

 

문제 해결은 간단한 서칭으로 해결할 수 있었다.

 

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

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

 

현재 윈도우 창의 높이의 1%를 vh변수에 저장하고 이 값을 --vh css변수에 픽셀 단위로 설정

 

resize 시에도 이 작업을 하도록 설정 한 후

 

@media only screen and (max-device-width: 640px) {
    .theme {
        height: calc(var(--vh, 1vh)*100);
    }
}

 

640px 이하 (모바일 기준)일때는 height를 앞서 설정한 --vh * 100으로 모바일 기준의 height : 100vh를 만족시킨다.