[Javascript] 모바일 safari, 삼성 브라우저 100vh 이슈 해결

PC에서는 문제없던 레이아웃이 ios safari나 안드로이드 삼성 브라우저로 열어봤더니 쓸데없는 스크롤이 생기거나 하단에 배치한 버튼이 브라우저 네비게이션 바 또는 url 창에 가리는 문제가 발생했다.

 

이는 url 바와 브라우저 네비게이션 영역도 포함하여 화면의 뷰포트를 계산하기 때문에 발생하는 현상이다. 더구나 url 바는 보여지기도 하고 사라지는 경우도 있는데 100vh는 이를 고려하지 못한다.

 

그럼, 어떻게 해결하면 될까?

 

실제 우리가 생각하는 화면의 높이의 1vh를 구해 전체 높이를 100vh로 선언해주면 된다!

물론 화면 크기가 변할 때마다 다시 1vh를 계산해야하는 것도 잊어서는 안된다.

 

제일 먼저 vh를 계산하고 document 스타일에 --vh라는 프로퍼티에 할당하는 함수를 만들어준다.

 

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

 

그리고 이를 App이 처음 렌더링 되었을 때, 실행할 수 있도록 useEffect 안에서 호출해준다.

더불어 브라우저가 리사이즈될 경우에도 다시 실행하도록 resize 이벤트에 등록해줬다.

 

const App = () => {
	useEffect(() => {
    	setOneVh();
        window.addEventListener('resize', setOneVh);
    }, []);
	
    return (
    	{/* do something */}
    )
};

 

이제 100vh가 필요한 곳에서 스타일 적용을 다음과 같이 해주면 끝-! 😜

 

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

 

 

 

 

✔️ 참고

The trick to viewport units on mobile | CSS-Tricks