Vuejs：移动浏览器上的 100vh答案

【问题标题】：Vuejs: 100vh on mobile browsersVuejs：移动浏览器上的 100vh
【发布时间】：2017-12-21 19:56:12
【问题描述】：

我有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 移动设备上无法运行。有没有人遇到同样的问题？

【问题讨论】：

不工作时是什么样子的？
webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug
我认为正确的事件名称是orientationchange（没有on 前缀）。
我认为这可能对您有所帮助：stackoverflow.com/questions/58886797/…

标签： vue.js vuejs2 mobile-safari mobile-chrome

【解决方案1】：

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

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

【讨论】：

【解决方案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 = "真实视口高度"。

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

【讨论】：