모바일 웹에서 주소창 높이 만큼 화면이 가려지는 이슈

작업환경	Vue3 / Vite
사용언어	JS, CSS
브라우저	Safari, iOS

 

이슈상황

모바일 화면의 높이를 디바이스 화면크기와 동일하게 적용하는 과정에서

브라우저의 주소창 높이만큼 화면이 가려지는 이슈

 

 

일반적인 주소 입력창 높이 계산 방법

일반적으로 디바이스 화면에 꽉차게 적용하기 위해서 css를 활용해 100vh를 많이 사용하게 되는데,

pc에서 브라우저를 통해 개발자 도구를 활용해 보면 문제가 없지만,

실제 모바일 디바이스로 확인 했을때 브라우저의 주소창 높이만큼 가려지게 된다.

[실제 모바일 디바이스에서는 우측 빨간박스 영역이 주소창으로 덮여버린다]

 

구글링을 통한 해결 방법은 이러했다.

1. window.innerHeight로 UI를 제외한 화면 영역의 높이를 계산

2. 계산된 높이값을 CSS의 :root 변수로 전달

3. 높이를 지정할 element에 변수를 사용한 높이 값을 적용

 

*관련문서 :  https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

The trick to viewport units on mobile | CSS-Tricks

[ 위 사이트에서 제안하는 방법 ]

실제 적용

꼭 --vh의 높이를 계산할때 window.innerHeight에 0.01을 곱해야할까?

위에서 생성한 '--vh'라는 변수는 실제 'vh' 단위가 가지는 단위적 특성(1vh가 화면높이의 1%를 의미하기 때문)을 맞추기 위해서  window.innerHeight를 쓸때 0.01을 곱하는 처리를 하게 되는것으로 보인다.

=> 단순히 하나의 element에 적용하는 관점에서는 필요 없는 과정으로 보이나, 여러 대상에 --vh 변수를 활용한다면 고려해봄직 한 방법이다.

 

window를 resize할때 다시 --vh를 계산하는 과정을 반드시 필요한가?

사실 지금 하는 과정은 모바일 디바이스에서 원활한 높이 계산을 위한 작업이기 때문에,

모바일 브라우저에서 화면 크기를 조절하는 케이스는 화면 전환을 사용하는 경우가 아니라면 필수가 아니라고 생각한다.

 

+ iOS기준 사파리에서 화면 최상단에서 화면을 아래로 끌어 내리면 새로고침을 위해 자동적으로 여백을 생성하게 되는데, 이것이 window를 resize 처리하는 것으로 판단되어 ui가 실시간으로 망가지는 것을 볼 수 있다.

 

 

해결방법

• 우선 편의를 위해 window.innerHeight에 0.01을 곱하지 않고 그대로 화면 전체 높이로 쓸수 있도록 적용
• resize처리는 pc에서만 작동하도록 적용했고, 모바일 여부는 vue mobile detection을 통해서 구분처리
• 현재의 화면에서만 적용이 필요했기 때문에 vue의 lifecycle에 맞춰 마운트시 높이를 적용
• 언마운트되면 다시 선언한 변수 값을 100vh로 전환되게 처리

let vh = 0
const onResize = () => {
  vh = window.innerHeight
  document.documentElement.style.setProperty('--vh', `${vh}px`)
}

onMounted(() => {
  onResize()
  if (!isMobile) {
    window.addEventListener('resize', onResize)
  }
})
onUnmounted(() => {
  vh = 100
  document.documentElement.style.setProperty('--vh', `${vh}vh`)
})