[React] 아이폰 100vh 오류

모달창 등에서 position을 fixed를 주고 화면을 꽉 채우기 위해서 vh를 100을 주는 경우가 있다. 

안드로이드 또는 PC 화면에서는 문제가 없는데 아이폰에서 100vh를 사용하는 경우 사파리에서 아래에 웹사이트 바가 

생겨서 깨지는 경우가 발생한다. 

 

이때의 해결 방법으로 

window.innerHeight * 0.01 이라는 값을 세팅해서 선언해준다고 한다. 

그리고 document에 스타일 속성을 줘서 넣어준 다음 해결하는 방법이 일반적인 방법이다. 

let vh = 0;

useEffect(() => {
  vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}, []);


// 사용
height: calc(var(--vh, 1vh) * 100);

 

이 방법을 사용해봤지만 해당 문제로 해결되지 않았다. 

 

또다른 방법으로 CSS를 사용해서 해결하는 방법이 있다고 한다. 

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

//

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

 

이런 방법으로 해결되는 경우도 있지만 

나의 경우에는 해결되지 않았다...

( 원인을 알아내는게 중요하지만 아직 원인을 알아내지 못했음,, ) 

 

일반적인 방법으로 해결하지 못한 나로써는 새로운 방법을 찾을 수 밖에 없었다. 

찾아낸 방법으로는 Position을 사용하는 것이다. 

 

모달 등은 최 상위에서 fixed를 사용하는데, 이때 top, left, right, bottom을 0으로 주면 전체 영역을 차지한다. 

그렇게 되면 굳이 width / height를 주지 않고 전체 영역을 가지기 때문에 아이폰에서 영역 문제를 해결할 수 있다!