Nextjs 모바일 주소창 유무에 따른 높이(viewport height) 변화 막기

제목이 다른 사람에게도 이해가 될지 모르겠지만..

1. 모바일 환경에서(chrome의 개발자도구에서는 안보인다.)

2. 주소창이 있다가 없어지는 경우(계속 보이는 경우나 계속 안보이는 경우에는 문제가 안생긴다.)

2번의 케이스는 touch event를 진행중일 때 발생한다. 이 viewport height에 변화가 생기는 이유는 모바일의 경우에 처음에는 주소창이 보이다가 스크롤을 움직이는 경우에는 주소창이 사라지면서 view port에 변화가 오기 때문이다. css에서는 이를 계산하는 dvh라는 것도 존재한다.

안드로이드에서는 사실 이 글을 쓰지 않아도 될 정도로 간단하게 해결되는데, 문제는 사파리에서는 dvh를 사용해도 이 문제가 생긴다.

이 문제가 발생하는 이유는 브라우저에서 스크롤 이벤트가 발생하는 경우에 모바일 뷰포트가 변화가 오는 것 이다. google에 이에 관련된 질문을 하면 대부분 html, body에 height를 주면 해결이 된다!와 같은 글들이 엄청 많은데, 종종 이 두개의 height만으로는 부족한 경우가 있다.

 

html,
body,
body > div:first-child,
div#__next,
div#__next > div {
  height: 100%;
}

nextjs 같은 경우에 dom의 root를 body의 __next에 두고있기 때문에 그 element까지 주면 해결되는 경우가 있다. 

 

한 가지 알아야할 주의 사항은.. html이나 body의 height 이벤트가 위의 css 로 인해서 변화하기 때문에 원래 작동하던 scrollTo가 작동 안하는 경우가 있다.(scroll과 관련된 메서드들)