모바일 웹에서 100vh 적용하기

모바일에서 스크롤 없이 높이를  딱 맞게 사용하고 싶어서

height: 100vh로 설정했다

 

개발자도구(모바일)로 확인 했을 때는 잘 적용이 된 것처럼 보였다

 

하지만!!

실제 모바일 기기로 크롬, 사파리에서 확인 하니 높이가 딱 맞게 적용이 안되고 있었다 🥲

(화면의 오른쪽에 스크롤이 생겨버렸다..ㅎㅎ)

 

이 이유는 100vh가 상단 주소창 영역과 하단의 네비게이션 영역의 사이즈까지 반영을 못하기 때문이다

 

 

해결 방법

javascript에서 window.innerHeight를 이용해 1vh를 계산해 주면 된다

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

css에서 vh로 사용할 값을 지정해준다.

height: calc(var(--vh, 1vh) * 100);