모바일 상단바(주소창) 문제 해결하기

데스크탑의 개발자 도구에서 가상 모바일 기기로 테스트하면 레이아웃이 깨지지 않는데, 실제 모바일에서 테스트하면 잘되지 않는 경우가 있다. 이러한 이유는 크롬 브라우저 기준으로 상단바(주소창)이 스크롤하면서 자꾸 움직이기 때문이다. 상단바가 움직이면 레이아웃이 맞다가도 틀어지는 경우가 있다. 

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body{
    scroll-behavior: smooth;
    width: 100%;
    height: 100%;
    position: fixed; /* for mobile to fix screen and prevent address bar moving */
    inset: 0;
    overflow: hidden; /* for mobile to fix screen and prevent address bar moving */
}

/* body::-webkit-scrollbar{
    display: none;
} */
main{
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: scroll; /* scroll inner element in html, body */
    /* border: 5px solid red; */
}

이러한 경우 최상단 요소(html, body)는 position: fixed 와 overflow: hidden 으로 설정해서 고정한다. 이렇게 되면 상단바는 더이상 움직이지 않는다. 또한, 최상단 요소 바로 아래의 main 요소에 width: 100% height: 100% 로 상단바를 제외한 나머지 컨텐츠 영역을 완전히 차지하도록 설정한다. 또한, main 요소에 overflow-y: scroll 을 설정하여 main 요소 안의 다른 요소들이 스크롤할 수 있도록 한다. 

.sticky{
    position: sticky; top: 0;
    height: 100svh;
}

또한, vh 단위는 스크롤바를 포함하기 때문에 모바일 지원을 위하여 svh 단위로 변경해준다. 

 

https://abcdqbbq.tistory.com/104

[css 단위] dvh, svh, lvh (모바일 주소 표시줄 영역 대응)

물론 상단바 유무에 따라 유동적으로 높이가 변하도록 dvh 로 설정해줘도 된다. 

 

하지만, 해당 블로그 글은 상단바가 고정되며, 존재한다고 가정하므로, svh 를 사용해도 무방하다.