모바일 100vh 문제! 해결방법!

[yunseorim1116]

Vh

vh는 viewport height에 해당하는 단위로 해당 브라우저의 높이에 따라서 상대적으로 적용되는 단위입니다.
예를 들어, 화면의 높이가 100px이라면 1vh는 1px이 됩니다.

하지만 모바일에서는 상단에 위치한 url 바와 하단에 있는 네이게이션바로 인해서 100vh를 설정하더라도 아래 혹은 윗 부분이 잘리는 현상이 발생합니다.

카톡으로 들어갈땐 제대로 보였는데 모바일 브라우저로 들어갈때 제대로 보이지 않았던 이유가 이것때문이었습니다!

해결책1

css 변수를 두고 그 변수를 리사이즈 이벤트 할때마다 업데이트 해줍니다. (블로그참고)

해결책2

폴리필

해결책 3

[ dvh ]

dynamic viewport height로 주소창에 따라 동적으로 변하는 단위입니다. 주소창의 유무에 따라 값이 변하게 되므로 사용자는 주소창의 유무와 상관없이 스크린 전체를 볼 수 있지만 스크롤 도중에 주소창의 유무에 따라 요소의 크기가 변하고 이에 따라 스크린을 다시 그리면서 성능에 이슈가 발생할 수 있습니다.
 

[ svh ]

short viewport height로 주소창이 포함된 스크린 기준으로 전체 가시 크기가 기준인 단위입니다.
 

[ lvh ]

long viewport height로 주소창이 제외된 스크린 기준으로 전체 가시 크기가 기준인 단위입니다.

CanIUse ?

https://caniuse.com/?search=

하지만 개발자라면 . . .
호환성도 생각해봐야겠죠

.
.
.
.
.

그럼 20000.