[React] 빌어먹을 iOS - vh 편

웹 개발을 하다보면 가장 큰 스트레스 중 하나가 브라우저이다. 

IE는 처리했고 남은게 사파리 ( iOS ) 그리고 떠오르는 샛별 카카오 브라우저이다.

 

카카오톡은 웹사이트 링크를 타고 들어가면 인웹 브라우저로 실행이 된다. 

근데 요놈도 참 간혹 예상치 못한 말썽을 일으기키는 뇨속이다. 

 

아무튼 iOS에서 발생한 문제를 하나씩 해결하면 올려보겠다. 

 

vh 

아이폰에서 vh를 100으로 설정했을 때, 스크롤을 내린다던지 해서 해당 영역이 짤리는 문제가 있다. 

 

resize 

  useEffect(() => {
    const setViewportHeight = () => {
      let vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty("--vh", `${vh}px`);
    };

    setViewportHeight();

    window.addEventListener("resize", setViewportHeight);

    return () => {
      window.removeEventListener("resize", setViewportHeight);
    };
  }, []);
  
  <div
    style={{
      height: "calc(100 * var(--vh))"
    }}
  />

첫 번째 해결 방법으로 화면의 뷰포트 크기가 줄어들었을 때 자동으로 뷰포트를 재조정해주는 방식이다. 

 

여기서 window.innerHeight * 0.01을 하는 이유는 

만약 높이가 900px이라면 우리는 이것을 `vh` 로 변환해야한다. 

 

여기서 1vh는 뷰포트의 높이의 1%를 뜻하기 때문에 900px의 1%, 즉 1vh는 9px로 사용한다. 

이렇게 사용하면 vh 단위를 사용하는 곳에서 --vh 변수를 사용하면 되므로 간단하게 처리가 가능하다. 

 

여기서 첫 번째 해결방법이라고 한 이유가 카카오톡에서는 일부 해당 방식이 제대로 작동하지 않는 문제가 있었다. 

 

-webkit-fill-available 

height: 100vh;

@supports (-webkit-touch-callout: none) {
  height: -webkit-fill-available;
}

두 번째 방법으로 -webkit-fill-available 속성을 사용하는 것이다. 

 

여기서 @supports는 특정 기능이 브라우저에 의해 지원되는지 확인하는 데 사용하는 규칙이다. 

-webkit-touch-callout 는 웹킷 기반 브라우저에서 터치하면 나타나는 컨텍스트 메뉴 ( 링크를 길게 누르면 나타나는 메뉴) 의 표시를 제어하는 속성이다. 

 

합쳐서 @supports (-webkit-touch-callout: none)는 브라우저가 -webkit-touch-callout 지원하는지 확인한다. 

결국 iOS 기기에서의 사파리 브라우저를 대상으로 css를 적용하는 속성이다. 

 

-webkit-fill-available

옵션은 뷰포트에서 사용가능한 높이를 사용한다는 것으로 사파리에서 작동한다. 

 

해당 방식을 사용하니 사파리 / 카카오톡 모두 해결이 되었다.