모바일 환경에서의 vh

문제인식

프로젝트 진행 중 전체화면을 만들기 위해 100vh를 사용했다.

PC환경에서 테스트 할 때에는 문제가 없었지만, 실제 모바일 기기에서 브라우저로 접속 후 확인했더니 세로 스크롤이 생기는 버그가 있었다.

 

vh는 viewport height에 해당하는 단위로, 해당 브라우저의 높이에 따라 상대적으로 적용되는 단위다.
예를 들어, 화면의 높이가 100px이라면 1vh는 1px이 된다.

 

원인

모바일 브라우저에서 100vh는 하단 URL을 입력하는 공간(이 영역은 스크롤 방향에 따라 가변적)을 포함하기 때문이었다.

• 모바일 브라우저에서 100vh는 하단 URL을 입력하는 공간을 포함한다.
• URL바는 상황에 따라 보여지거나 없어지는 경우가 있는데, 100vh는 그에 따라 다시 측정되지 않는다.

 

해결

모바일 환경에서 100vh를 사용하기 위해서는, Javascript로 화면 세로값을 체크 후, 계산을 통해 사용 해야한다.

 

 

1. Javascript + CSS로 해결

1-1. Javascript로, 페이지 로딩 시와 resize될때 마다 화면의 높이값을 체크하여 html에 --vh라는 style을 추가해준다.

// --vh
const setVh = () => {
    document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`);
    
    // const vh = window.innerHeight * 0.01;
    // document.documentElement.style.setProperty("--vh", `${vh}px`);
};
window.addEventListener('resize', setVh);
setVh();

추가해 준 후 페이지에서 개발자모드로 코드를 보면 최상단 html에 style="--vh:800px" 이 추가되어 있음을 확인할 수 있다.

페이지를 리사이징 하면, --vh값이 바뀌는 것도 확인할 수 있다.

 

1-2. CSS :root에 --vh 선언 및 사용

:root {
    --vh: 100%;
}

html, body{
    width:100%;
    min-height: var(--vh);
    /* min-height: calc(var(--vh) * 100); */
}

근데 이미 html에 style로 들어가 있기 때문에 :root의 선언이 추가로 필요한지는 잘 모르겠다.

 

 

2. CSS로 해결

-webkit-fill-available이라는 프로퍼티로 해결할 수 있다.

적용할 대상에 다음과 같이 CSS를 작성한다.

html, body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

/* 또는 */
html, body {
    height: 100vh;
    height: -webkit-fill-available;
    height: fill-available;
}

 

2-1. CSS @supports 문법 (기능쿼리, feature query)

문제는 크롬과 같은 지원하지 않는 데스크탑 브라우저들이 있다는 것이다.

이것을 해결하려면 iOS 환경에서만 적용되도록 해야한다.

@supports (-webkit-touch-callout: none)을 사용하면 iOS 환경만 선택할 수 있다.

.fill-screen {
    height: 100vh;
    width: 100vw;
}

/* iOS only */
@supports (-webkit-touch-callout: none) { 
	height: -webkit-fill-available;
}

 

caniuse.com

 

---

 

참고

1. @supports 문법

https://abcdqbbq.tistory.com/71

CSS Supports, @supports (지원하는 css에 따른 스타일 적용)

 

2. 100vh관련

https://injeblog.tistory.com/110

iOS 사파리 100vh 문제 해결법

 

https://velog.io/@nyanji00/react-iOS%EC%97%90%EC%84%9C-100vh%EC%97%90-%EC%8A%A4%ED%81%AC%EB%A1%A4%EC%9D%B4-%EC%83%9D%EA%B8%B0%EB%8A%94-%EB%AC%B8%EC%A0%9C

[react] iOS에서 100vh에 스크롤이 생기는 문제

https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

https://medium.com/quick-code/100vh-problem-with-ios-safari-92ab23c852a8

https://dev.to/cydstumpel/4-things-in-web-development-i-ve-learned-in-2020-so-far-3cg