INJE BLOG
WASTING YOUR TIME
SINCE 2017
iOS 사파리 100vh 문제 해결법
아이폰에서는 100vh가 창보다 길게 설정됩니다. 한번 볼까요? .fill-screen { height: 100vh; width: 100vw; } 간단한 해결법은 100vh 대신 -webkit-fill-available를 사용하는 것입니다. .fill-screen { height: -webkit-fill-available; width: 100vw; } 문제는 크롬과 같은 지원하지 않는 데스크탑 브라우저들이 있다는 것이죠. 해결 하려면 -webkit-fill-available가 iOS 환경에서만 적용되도록 하면 됩니다. @supports (-webkit-touch-callout: none)를 사용하면 iOS 환경만 선택할 수 있죠. .fill-screen { height: 100vh; width: 100v..