웹뷰 전역 레이아웃 스타일 관련 질문드립니다 !

Question

안녕하세요 ! 웹 프론트엔드를 공부하고 있는 뉴비입니다.

현재 웹뷰(?) 프로젝트를 진행하고 있는데요 ! Nextjs와 styled-components를 이용해  개발하고 이를 PWA를 적용해 모바일에서 실행 가능하도록 하는것이 목표입니다.

페이지 작업 도중 개발자 도구의 각 모바일 기기 환경에서 레이아웃이 달라지는 문제가 발생하고 있는데요 !

예를 들어, 아이폰 SE환경 (width 375px) 에서는 페이지의 컨텐츠가 얼마 없음애도 불구하고 y축 스크롤이 생기는 문제, 이보다 큰 기기인 아이폰 14 pro (width 430px) 등에서는 아래쪽 여백이 너무 많아 허전한 느낌이 듭니다 ㅠㅠ

이를 해결하려면 어떤 식으로 접근해야 할까요 ?

현재 globalCss는 캐치테이블(https://app.catchtable.co.kr/)의 Wrapper div를 참고하여 대강 적용해둔 상태입니다 .. !

유길종 · Answer

문제 상황이 뭔지 정확하게 인식하기 어렵지만 보여주신 css 코드만으로 나이브하게 생각해보았을 때에는 단위 이슈로 인해 특정 기기에서 세로 스크롤 이슈가 발생할 수 있어보입니다. 우선은 vh 단위를 사용하는 대신 dvh, svh, ivh 등의 단위를 학습해보시고 시도해보시면 좋을 것 같습니다.

우선은 vh 단위를 사용하는 대신 dvh, svh, ivh 등의 단위를 학습해보시고 시도해보시면 좋을 것 같습니다.