iOS 사파리 100vh 문제 해결법

아이폰에서는 100vh가 창보다 길게 설정됩니다. 한번 볼까요?

아이폰 100vh 적용 화면

.fill-screen {
  height: 100vh;
  width: 100vw;
}

간단한 해결법은 100vh 대신 -webkit-fill-available를 사용하는 것입니다.

아이폰 -webkit-fill-available 적용 화면

.fill-screen {
  height: -webkit-fill-available;
  width: 100vw;
}

문제는 크롬과 같은 지원하지 않는 데스크탑 브라우저들이 있다는 것이죠.

크롬 -webkit-fill-available 적용 화면

해결 하려면 -webkit-fill-available가 iOS 환경에서만 적용되도록 하면 됩니다. @supports (-webkit-touch-callout: none)를 사용하면 iOS 환경만 선택할 수 있죠.

.fill-screen {
  height: 100vh;
  width: 100vw;
}

/* iOS only */
@supports (-webkit-touch-callout: none) { 
  height: -webkit-fill-available;
}