문제 인식
body 의 height 를 100vh 로 놓을 경우, 데스크탑에서는 문제없이 깔끔하게 적용되지만, iOS 모바일 에서는 100vh 가 하단 바까지 확장되어 스크롤이 발생합니다. 이는 사용자 경험이 깔끔하지 못한 문제를 발생시켜서, 하단 바를 제외한 높이를 100vh 로 인식하도록 하는 트릭을 사용하고자 합니다.
급하신 분을 위해 코드로 결론부터 먼저 제시해 드리고 아래에서 설명을 이어나가겠습니다.
해결코드
CSS, JS 각각의 처리가 필요합니다.
CSS
height: 100vh; /* 혹시나 Custom Property 지원 안하는 브라우저를 위한 복귀점(Fallback) */
height: calc(var(--vh, 1vh) * 100);새로 추가된 CSS Custom Property 기능을 통해 vh 변수에다가 100 을 곱해줄겁니다. 이 vh 변수는 모바일에서 하단바를 제외한 부분을 100등분 나눈 값입니다. 일단은 1vh 로 할당해줬어요. vh 가 정의되지 않았을 수도 있으니까요. 그럼 이제 vh 가 어디서 정의될 것인가? 바로 뒤에 JS 에서 정의하여 덮어쓰는겁니다.
윗줄의 height:100vh; 는 안 써줘도 되는데 혹시나 Custom Property 지원 안해주는 IE 같은 브라우저가 있을까봐 해주는 겁니다.
JS
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`)
})
프로그램이 실행되면 이 소스를 써줍니다. 원래 이벤트는 안 걸어줘도 되는데 혹시나 창크기 변경할거 대비해서 완벽하게 하려고 해주는 겁니다.
이 소스가 시사하는 바는 정말 큽니다. 그토록 하단바 까지 높이취급을 하던 모바일 브라우저가?? window.innerHeight 에서는 하단바가 제외된 높이값이 나온다는 겁니다. 정말 다행 또 다행입니다. 이제 이걸 재빠르게 캐치하여 100등분 하고 CSS Property 에 넣어주면 모바일화면에서 하단바 제외한 뷰포트의 1vh 가 몇 픽셀인지 계산이 완료되는 것입니다!
