Vuejs：在移动浏览器上为 100vh

Question

我有 min-height: 100vh 的页面它在移动浏览器上呈现，底部有一些溢出。我使用这个脚本来修复它：

  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);
  }

它在模拟器中工作正常，但在 chrome/safari 移动设备上不工作。有人遇到同样的问题吗？

Answer 1

是的，我在使用 vh 时遇到了类似的问题。这是 .

我对您的建议是停止在手机和平板电脑上使用 vh 以避免这些黑客行为。请改用经典的相对 %（百分比）值。因为我用 % 替换了 vh 我在手机上没有这样的问题，但它需要更多的实施工作。在所有情况下使用 % 并不简单，但它会给您带来回报，因为您拥有一个以相同可预测的方式在任何地方工作的解决方案。

Answer 2

这个VueJS组件就是为了解决它而设计的：

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>

适用于较小的百分比...其中 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

Vuejs: 100vh on mobile browsers

vue.js

vuejs2

mobile-safari

mobile-chrome