모바일 응답에 100vh를 사용하지 마십시오.

일반적으로 우리는 전체 화면 레이아웃에 height:100vh를 사용합니다. 해킹이 쉽고 더 나은 디자인을 얻을 수 있는 편리한 방법입니다.

예시

.content {
   height: 100vh;
}

그러나 실제 장치에서 디자인을 테스트할 때 몇 가지 문제에 직면합니다.

대부분 모바일의 Chrome 및 Firefox 브라우저에는 상단에 UI(주소 표시줄 등)가 있습니다.

Safari에서는 더 까다로운 주소 표시줄이 맨 아래에 있습니다.

브라우저마다 표시 영역의 크기가 다릅니다

.

모바일 장치는 브라우저 뷰포트를 (상단 표시줄 + 문서 + 하단 표시줄) = 100vh로 계산합니다

.

전체 문서가 100vh를 사용하여 페이지에 채워짐

문제

Chrome의 경우

스크롤바 문제가 감지되었습니다. 사용자 흐름이 좋지 않고 콘텐츠 탐색이 어렵습니다.

참고: 사용자 흐름을 더 나쁘게 만드는 사파리에서도 이 문제를 테스트했습니다.

솔루션

JS를 사용하여 앱의 높이 감지

window.innerheight 속성으로 페이지 높이를 설정합니다(javascript 사용).

const documentHeight = () => {
 const doc = document.documentElement
 doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
}
window.addEventListener(‘resize’, documentHeight)
documentHeight()

사용, CSS 변수

:root {
 --doc-height: 100%;
}

html,
body {
 padding: 0;
 margin: 0;
 height: 100vh; /* fallback for Js load */
 height: var(--doc-height);
}

여기에서 documentHeight 함수는 새로운 스타일 속성 var('--doc-height')를 설정하고 현재 창 높이를 포함합니다.

최종 결과

크롬 브라우저

참고: 이제는 세로로 추가 스크롤바가 표시되지 않으며 Safari에서도 문제가 발생하지 않습니다. Safari의 하단 주소 표시줄은 항상 하단에 있어 사용자가 웹사이트로 쉽게 이동할 수 있습니다.


결론
👏👏 여기까지 오셔서 모바일 장치 뷰포트 문제를 해결할 수 있기를 바랍니다. 따라서 프로젝트에서 시도해 보고 즐기시기 바랍니다.

자유롭게 생각과 의견을 공유하고 문제나 질문이 있으면 의견을 남겨주세요.

다음까지,
계속 해킹하세요, 건배