1. vh값이 적용되지않음

아이폰 Safari에서는 노치화면과 url바 등으로 힌해 vh값이 제대로 적용되지않는다. 해당 부분까지 포함하여 계산하는것으로 예상됨

🚨 vh는 vh = viewport height 라는 의미로 화면에 보여지는 viewport에 맞춰 그에따른 비율로 설정된다. 화면의 높이가 1000px이라 가정해보면 1vh는 10px이 된다.

2-1. js로 적용해보기

js를 활용하여 window innerHeight값을 활용해 해당 값을 기준으로 하여 vh값을 재설정하여 변수로 저장한다.

/*
--vh라는 값으로 html태그에 --vh값을 설정해준다 
(윈도우 innerHeight값을 기준으로 1vh를 px값으로 --vh에 저장) 
*/
function setVhProperty(){
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', vh + 'px');   
}

//실행부
setVhProperty();

//윈도우 resize시마다 실행(viewport가 바뀌기때문에)
window.addEventListener('resize', function () {
  setVhProperty();
});

😀 이제 css에서 --vh값을 활용하여 vh값을 설정해준다.

.100vh{
	height: calc(var(--vh, 1vh) * 100);
}

2-2. css로 적용해보기

-webkit-fill-available 속성 사용하기
뷰포트의 사용 가능한 만큼 높이값을 설정해준다.

.100vh{
	height: -webkit-fill-available;
}

🚨 해당 속성은 꽉채울 경우에만 사용할 수 있을것 같고, webkit 기반만 적용이 가능하기에 ios일경우에만 사용하도록 분기해주는게 좋을 것 같다.