1 / 10
css · hard
모바일 Safari에서
height: 100vh
가 풀스크린이 안 되고 일부가 가려 보이는 이유와, 가장 적절한 대체 단위는?
100vh
는 항상 가장 큰 viewport(주소창이 사라진 상태) 기준이라 주소창이 보일 때 화면을 넘어가 일부가 가려져요.
100dvh
(dynamic viewport height)나
100svh
(small)를 쓰면 현재 표시 가능한 영역에 맞춰져요
iOS의 잘못된 반올림 때문이며
100%
로 바꾸면 해결돼요
vh
단위는 모바일에서 동작하지 않으니 픽셀 단위로 직접 환산해야 해요
Safari가
vh
를 disable하기 때문에
vmin
으로 대체해야 해요
다음 →