반응형 웹 모바일 브라우저 주소창을 고려한 css height 설정

반응형 개발을 하다보면 보통 Chrome 개발자 툴 같은 것을 이용하며 개발을 할 것이다.

문제는 개발툴을 이용해서 만들면 잘 나오는데, 실질적으로 배포를 해보면 브라우저의 주소창 때문에 다르게 나오는 것을 알 수 있다.

↑브라우저 주소창 때문에 우리가 만든 사이트가 제대로 나오지 않을 수 있다.

해결방법

.my-element {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

css를 위와 같이 만들어 주고 js는 아래와 같이 사용하면 된다.

let vh = window.innerHeight * 0.01;

document.documentElement.style.setProperty("--vh", `${vh}px`);

위의 코드는 height 100을 적용하기 위해 0.01에 해당하는 값을 저장하고 js의 :root에 css 변수 --vh를 만들어주는 것이다.

브라우저 크기를 늘리거나 줄인다면?

위의 코드는 잘 작동하지만 사용자가 브라우저의 크기를 늘리거나 줄이면 다시 vh 값을 변화시켜야 한다. window에 resize이벤트 리스너를 붙이고 리사이징할때 변화시켜 주면 된다.

let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty("--vh", `${vh}px`);

window.addEventListener("resize", () => {
  console.log("resize");
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty("--vh", `${vh}px`);
});

참고 사이트 : https://css-tricks.com/the-trick-to-viewport-units-on-mobile

The trick to viewport units on mobile

 

 

출처 :https://yohanpro.com/posts/css/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%A3%BC%EC%86%8C%EC%B0%BD-%ED%81%AC%EA%B8%B0-%EC%A0%9C%EC%96%B4