[Vue] iOS Mobile Safari & Chrome X 100vh Issue (Feat. Vuetify)

protect-me·2021년 10월 31일

chrome 100vh ios 100vh ios 높이 safari 100vh 사파리 100vh 사파리 높이

👨🏻‍💻 프로젝트

목록 보기

15/16

💣 issue

iOS Mobile Safari 또는 Chroime 사용 시,
100vh로 높이를 맞추면 하단의 내용이 잘리는 현상.
특히, 하단에 배치해둔 button, alert 등의 내용이 잘리는 상황
이미지 출처 : CSS: Watch out for 100vh height in mobile browsers

👨🏻‍💻 Solve

🚀 `public > index.html`

현재 window의 innerHeight를 구해서 --customVH변수에 담아 styleProperty에 세팅함

  <head>
    ...
  
    <style>
      body {
        height: calc(var(--vh, 1vh) * 100);
      }
    </style>
  </head>

  <body>
    ...
  
    <script>
      let customVH = window.innerHeight * 0.01
      document.documentElement.style.setProperty('--vh', customVH + 'px')
      window.addEventListener('resize', () => {
        let customVH = window.innerHeight * 0.01
        document.documentElement.style.setProperty(
          '--vh',
          customVH + 'px',
        )
      })
    </script>
  </body>

🚀 사용

container와 content에서 customVH를 이용하여 계산함

// app.vue
  <v-app id="app-container">
    ...
  </v-app>
...
<style>
.app-container {
  height: calc(var(--vh, 1vh) * 100);
  overflow: scroll;
}
</style>

// CourtList.vue
<style>
.court-list-container {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100 - 48px);
  display: flex;
  flex-direction: column;
  .court-list-content {
    width: 100%;
    height: calc(var(--vh, 1vh) * 100 - 134px);
    overflow: scroll;
  }
}
</style>

🚀 `Vuetify` 환경

v-application--wrap의 min-height 기본값이 100vh로 설정되어있기 때문에
App.vue의 style 태그에서 scoped를 떼고 !important로 덮어씌워야함.

// App.vue
<template>
  <v-app id="app">
    ...
  </v-app>
</template>
...
<style lang="scss"> // `scoped` 제거
#app {
  height: calc(var(--vh, 1vh) * 100);
  overflow: scroll;
  .v-application--wrap {
    min-height: calc(var(--vh, 1vh) * 100) !important; // 덮어씌우기
  }
}