viewport 사용하지말자?!

viewport를 사용하지 말자라는 의견들이 해외 커뮤니티에서 심심찮게 보인다. 이게 왜 그런가 생각을 제대로 해본적이 없는데 스크롤이 없는 뷰를 만들때 문제가 되더라...
최근 모바일용 웹을 개발하면서 한 화면에서 스크롤이 생기지 않도록 만들 필요가 있었는데.... 컨텐츠들이 한 화면에 안들어와서 고생을 해서 기록을 남겨놓는다.

결론

제가 개인적으로 느낀 생각입니다.
viewport 를 기준으로 만들 때 조금 조심해야할 부분들이 존재합니다. css로 각 OS나 브라우저 별로 대응하는 방법이 있지만 레거시 문제들도 있고 javascript로 대응하는 방법이 조금 더 현명하지 않을까? 라는 생각이 들기도합니다.

결과물

netlify에 reactjs로 만든 결과물이다.
무료버전에서 문제가 안생기면 이대로 놔둘게요.
모바일로 봤을 때 확인할 수 있을거에요!

버튼을 클릭시 vh 가 --vh 로 바뀌고 반대도 가능합니다.

결과물
https://100vh-test.netlify.app

문제점

viewport는 url bar 높이가 포함된다.

iOS 사파리는 bottom bar의 크기를 포함한다.

이거 몰라서 개고생을 했다. 이게 개발자모드에서 보면 문제가 없었는데 netlify로 배포하고나서 실제 디바이스에서 확인하면서 알았다.ㅠ

맨날 ReactNative 를 사용하면서 safeareaview 를 사용해서 당연히 그런게 있을거라고 생각했는데 없더라. 그리고 이번에 알게된게 ReactJS는 ReactNative보다 현저하게 관련 문서들이 부족하다... 정말 눈물났다. ㅠ ReactNative 개발자들에게 너무 감사하다 ㅠ

앞으로 react-native-web 으로 모바일 개발도 생각해봐야겠다.

해결책

밑의 링크를 참조해서 reactjs 에 맞게 수정하였다. 밑을 참고해서 만들면 될 것 같다. (복붙해도 원하는대로 동작 안할 가능성이 높다.)

  let windowInnerHeight = 0;
  let vh = 0;

  const handleResize = ()=>{
    const currentInnerHeight = window.innerHeight;
    console.log(`${currentInnerHeight}/${windowInnerHeight}`);
    if(currentInnerHeight !== windowInnerHeight ){
      windowInnerHeight= currentInnerHeight;
      vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', `${vh}px`);
    }
  }

  handleResize()

  React.useEffect(() => {
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    }
  });

height을 중복으로 쓰는 이유는 Custom Properties를 지원하지 않는 브라우저가 있을 수 있으니 중복으로 써줬다.

height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);

고찰

이 방법 외에 css로 해결하는 방법도 있지만 chrome이슈도 있는 듯하고 브라우저 별로 지원되는지 OS별로 지원이 되는지가 불분명하다. 그래서 퍼포먼스 이슈가 있을지 모르지만 javascript로 처리하는 것을 선호한다.

참조
1. https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
2. https://www.youtube.com/watch?v=YN0OjO2R1zg