Vuejs: 100vh on mobile browsers

Question

I have page with min-height: 100vh and it renders on mobile browsers with some overflow on bottom. And I use this script to fix it:

  methods: {
    calcVH() {
      const vH = Math.max(document.documentElement.clientHeight, window.innerHeight, window.screen.height || 0)
      document.getElementById('app').style.height = vH + 'px';
    }
  },
  mounted() {
    this.calcVH();
    window.addEventListener('onorientationchange', this.calcVH, true);
    window.addEventListener('resize', this.calcVH, true);
  }

It works ok in emulator, but it doesn't work on chrome/safari mobile. Did anyone have same problem?

http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug — Roy J, Dec 21 '17 at 20:41
I think the proper event name is `orientationchange` (without the `on` prefix). — Roy J, Dec 21 '17 at 20:45
I think this might help you: https://stackoverflow.com/questions/58886797/how-to-access-a-the-real-100vh-on-ios-as-a-css-var — Drew Baker, Nov 16 '19 at 01:56

score 4 · Accepted Answer · answered Dec 21 '17 at 21:46

Yes, I had similar issues using vh. It's a known problem.

My suggestion for you is to stop using vh on mobile and tablets in order to avoid these kind of hacks around. Use classic relative % (percentage) values instead. Since I've replaced vh with % I have no such problems on mobiles but it requires a bit more implementation effort. Using % isn't straightforward in all cases, but it pays you back since you've got a solution which works pretty everywhere in the same predictable way.

score 0 · Answer 2 · answered Dec 26 '19 at 07:59

This VueJS component is designed to solve it:

https://github.com/razumnyak/vue-div-100vh

<template>
  <vue100vh :css="{height: '100rvh';}">
    <marquee>Your stuff goes here</marquee>
  </vue100vh>
</template>

<script>
import vue100vh from 'vue-100vh'

export default {
  components: { vue100vh },
}
</script>

Works for smaller percentages ... where rvh = "real viewport height".

<vue100vh :style="{ minHeight: '50rvh' }">
  <marquee>This is inside a div that takes at least 50% of viewport height.</marquee>
</vue100vh>

Vuejs: 100vh on mobile browsers

2 Answers2