React 모바일 브라우저 화면 잘리는 문제 해결(100vh) + 유저 디바이스 정보 확인하기

https://github.com/woowacourse-teams/2023-team-by-team/pull/901

[FE] 모바일에서 하단 메뉴 잘리는 버그 픽스 by hafnium1923 · Pull Request #901 · woowacourse-teams/2023-team-by

 

팀바팀의 모든 모바일 뷰를 내가 구현하게 되었는데,,, 모바일과 컴퓨터에 따라 같은 페이지를 다른 방식으로 보여줘야했다. 때문에 홈페이지에 접속한 디바이스에 따라 판단해서 보여주기로 했다.

유저 디바이스 정보 알아내기

export const getIsMobile = () => {
  const isIos = window.navigator.userAgent.match(/ipad|iphone/i) !== null;
  const isAndroid = window.navigator.userAgent.match(/Android/i) !== null;

  if (isIos || isAndroid) {
    return true;
  }

  return false;
};

노가다하면서 구현하던 와중 ios의 몇 브라우저에서 웹 뷰가 잘리는 현상이 생겼다. 하단에 네비게이션을 위치시켰는데 절묘하게 잘려버린 것.

문제 상황

없어져버린 나의 네비바.. 뭐야 돌려줘요

전체 크기를 100vh로 잡았는데 실제로는 브라우저 상단과 하단의 메뉴까지 100vh로 포함하여 잡히기 때문에 문제가 생겼다.

문제 해결 방법

CSS 변수 선언

최상단 CSS에 변수를 새로 만들어준다. 변수이름은 뭐든 상관없지만 vh를 대신해서 사용할 것이기 때문에 —vh라고 지었다.

styled-components를 사용했기 때문에 globalStyle.ts에 작성하려했는데 뭐가 문제였는지 모르겠지만 값이 잘 안잡히더라 그래서 그냥 최상단 css 파일에 선언했다.

//App.css

:root {
  --vh: 100%;
}

vh대신 사용할 변수에 값 지정해주기

App.ts에 아래와 같은 코드를 추가해준다.

//App.ts

	useEffect(() => {
    const vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
  }, []);

App 첫 로딩시 window의 높이를 구하고 100분의 1로 --vh값을 지정해 이후에 vh를 사용해야하는 곳에 해당 변수를 대신 사용할 수 있도록 한다.

새로운 변수로 사용하기

사용처에서 아래와 같이 사용해주면 된다. 혹시 —vh값이 지정되지 않을 때를 대비해 1vh도 할당해준다. vh가 필요한 만큼 뒤에 곱하기를 해주면 끝~!

height: calc(var(--vh, 1vh) * 100);

해결 완료

짜잔~ 아까전엔 안보이던 네비바가 보인다! 이제 정상적으로 기능을 사용할 수 있게되었다.