React 앱웹, 모바일 웹 스크롤 버그

웹앱을 만들고 있었는데 
모니터 스크린 화면에서는 괜찮았는데, 네트워크 ip를 이용해 휴대폰으로 볼 때마다 밑에 스크롤이 발생하는 현상이 발생하였다.

(특히 크롬에서! 사파리는 문제 없었음)

원인

문제의 원인은 노트북(모니터) 스크린 화면과 모바일 화면의 뷰 포트 계산이 다르기 때문이다!
모바일 뷰포트는 상하단의 주소창과 네비바를 포함해서 뷰포트가 계산된다  

 

우리 프로젝트는 App.tsx에 

  <div className="w-full flex justify-center items-center">

      <main

        className="w-full max-w-[444px] px-4 pb-8 bg-white min-h-screen"

        style={{ maxWidth: "444px"}}

      >

        {isSplashShown ? <SplashScreen /> : <RouterProvider router={router} />}

      </main>

    </div>

다음과 같이 잡았었다.

main에 min-h-screen을 설정한 이유는, 모니터에서 줌을 했을 때 레이아웃이 깨지는 현상이 발생했기 때문이다.

첫번째 시도

 

모바일 환경에서 dvh 단위를 반영하려고 아래와 같이 스타일을 변경해 보았다.

 style={{ maxWidth: "444px", height: "100dvh" }}

이 설정으로 화면이 줄어드는 문제는 어느 정도 해결됐지만,
min-h-screen이 제거되면서 레이아웃 안정성이 무너졌다.
즉, 콘텐츠가 길어지거나 브라우저 줌을 할 경우, 다시 레이아웃이 깨지는 문제가 발생했다.

두번째 시도

  style={{ maxWidth: "444px", minHeight: "100dvh" }}

minHeight를 사용하니 레이아웃 안정성이 확보되었고,
레이아웃 깨짐 없이 모바일 환경에서도 잘 작동했다. 줌이나 콘텐츠 초과 상황에서도 문제없이 대응되었다.



결론: 모바일웹앱을 만들때는 dvh를 적극 활용하자!!!