iOS 사파리 브라우저에서 상단과 하단 인터페이스가 가변적으로 변하는데 height: 100vh로 뷰포트를 채워서 사이즈를 잡으면 스크린 전체를 잡아버린다.
진짜 전체 사이즈가 아닌것처럼 보여서 내용을 중앙으로 배치하면 중간인 느낌이 들지않게 된다.

예전에는 해결법이 없었는데 최근에 알아보니 css로 해결방법이 생겨난거 같다.

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

주로 body 엘리먼트에 적용하는거 같은데 위와같이 css를 추가하면 사파리 브라우저에서 뷰포트가 전체로 잡힌다.
하지만 구글 크롬 브라우저에서 뭔가 오류가 발생한다.
이를 방지하기 위하여 다음과 같이 미디어쿼리로 조건을 주면 크롬에서도 정상적으로 보이게 할 수 있다.

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

출처: https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/