vh는 정말 개짱일때는 개짱인데 모바일 safari 환경에서는 사람을 돌게 만든다. 사실 모바일 safari 환경은 이렇게 해결 가능하지만 제발 카카오톡&카카오 워크 인앱에서 페이지좀 열지 말아주세요 제발 🙏🏻

🚬 vh만 믿고 살다간 큰코 다쳐

• 모바일 Safari 브라우저에서 vh 단위를 사용할 iOS 기기의 주소 표시줄로 인해 오류가 발생한다. 왜냐하면 모바일 Safari는 화면 전체 높이를 100vh로 측정하지만, 주소 표시줄을 고려하지 않고 계산하기 때문이다.
• 실제 보여지는 innerHeight 값 보다 더 크게 화면의 높이를 잡기 때문에 최하단의 요소가 가려지는 현상이 발생한다.

💻 해결 방법

① JS로 vh 계산하기

일단 JS에서 커스텀 vh를 만들어 준다.

const vh = window.innerHeight * 0.01; // innerHeight에 0.01을 곱해서 새로운 vh 단위를 구함
document.documentElement.style.setProperty('--vh', `${vh}px`); 
// vh값을 --vh 변수에 담는다.

위에서 구한 --vh 변수를 css에 적용해 준다.

.my-element {
  height: 100vh;
  /* 특정 브라우저에서 --vh가 작동하지 않을 수 있기에 미리 작성 */
  height: calc(var(--vh, 1vh) * 100); 
}

👀 브라우저가 리사이즈가 될 여지가 있다면 다음의 내용을 추가해야 한다

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

② dvh 사용해보기

🚨 무조건 호환성 체크가 먼저 🚨

• svh(Short View Height) : 사용자가 볼 수 있는 가장 작은 viewport
• lvh(Large View Height) : 사용자가 볼 수 있는 가장 큰 viewport
• dvh(Dynamic View Height) : 현재 viewport 높이를 나타내는 동적인 값이며 주소 표시줄이 축소된 상태에서 스크롤을 통해서 주소 표시줄이 확장되면 dvh 값이 변경된다.

③ css로 해결하기

이전에는 위의 방법으로만(거의 1번으로) 해결했었는데 최근 css로 해결 방법이 생긴 것 같다.

이정도 사용성이면 나쁘지 않은 수준?

min-height: 100vh;
min-height: -webkit-fill-available;

근데 구글 크롬 브라우저에 오류가 발생한다 이런 경우에는 해당 css를 추가한다

min-height: 100vh;
@supports (-webkit-appearance:none) and (stroke-color: transparent) {
  min-height: -webkit-fill-available;
}

일반적으로 프로젝트에서는 안정성 때문에 1번의 유형을 가장 많이 쓰는데 기억해 두면 나쁘지 않으니깐 정리해 보았다. 🧹