아이폰에서의 100vh는 뷰포트의 높이가 아니다?!

웹앱을 개발해서 테스트 배포를 했다. 

 

근데 응?! 

 

푸터가 안보이는 것이다. 

 

보통 처음에 프레임만 잡고 그 안의 것들을 컴포넌트화해서 나눠서 개발한다.

 

그런데 맨 상위 프레임에 나는 분명히

 

100vw와 100vh 를 주었기 때문에 모든 요소가 화면에 보여야 하는데 푸터가 안보이는 것이다!

 

 

무엇이 원인인지 가설을 세우면서 고민해보았다.

 

1. 다른 요소에 가려졌다. 

2. 100vh가 내가 아는 100vh가 설마 아닌가 ( 아니었으면 좋겠다 )

 

1은 충분히 그럴 수 있다. 왜냐하면 푸터를 fixed로 뷰포트 기준 맨 하단에 잡아놨었는데, 

이것이 메인 화면의 zindex에 밀려서 가려졌을 수도 있다. 

 

는 무슨.. 그럴 수 없다... 난 메인 화면에 zindex를 주지도 않았고, 여기에 출처 불명의 라이브러리도 쓰지 않았다.

 

그럴 수 없는..

 

 

그럼 다음으로 또 아이폰만의 뭔가 다른 무엇인가가 있나? 

 

아이폰 앱을 개발할 때도 그런 인상을 많이 받았기 때문에 바로 이런 생각이 들었다.

 

애플은 뭔가 "우리는 다르게 할거야" 이렇게 말한 만한 요소가 많았었기 때문이다.

 

null을 굳이 nil 로 표현한다던지.. 그런거 있지 않나...

 

어쨋든 각설하고, 아이폰 100vh를 구글에 검색 

 

역시는 역시나였다. 

 

Error | 모바일 브라우저에서 100vh 적용 오류 해결 (ios/android) (velog.io)

Error | 모바일 브라우저에서 100vh 적용 오류 해결 (ios/android)

 

 

아이폰에서의 브라우저 같은 경우는, 상단의 노치나 하단의 툴바로 인해서 뷰포트를 실제 보여지는

윈도우 innerHeight 보다 크게 잡는다는 것이다. ( 그러니까 하단의 툴바까지 포함된 높이이다. )

 

그래서 100vh는 내가 아는 그 100vh보다 컸던 것이었고, 그래서 페이지에 들어가면 바로 푸터가 보여야 하는 것인데 

저 쪼아래 내려가 있던 것이었다. 

 

 

해결방법은 여러가지가 있는데

    min-height: -webkit-fill-available;

 

를 쓰거나

 

가내수공업 css 리사이징을 하거나

 

혹은 새로운 동적 단위를 사용하면 된다. 

바로 dvh를 .... 

 

맨 후자를 추천한다.

 

끗