Post

[CSS] 모바일 환경에서의 vh

Posted
By songmiok
4 min read
[CSS] 모바일 환경에서의 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을 추가해준다.

1
2
3
4
5
6
7
8
9

// --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값이 바뀌는 것도 확인할 수 있다.

alt text

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

1
2
3
4
5
6
7
8
9

:root {
  --vh: 100%;
}

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

2. CSS로 해결

-webkit-fill-available이라는 프로퍼티로 해결할 수 있다.
적용할 대상에 다음과 같이 CSS를 작성한다.

1
2
3
4
5
6
7
8
9
10
11

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 환경만 선택할 수 있다.

1
2
3
4
5
6
7
8
9

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

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

alt text caniuse.com


참고
CSS
This post is licensed under CC BY 4.0 by the author.