Vue.js Vuejs:100vh在移动浏览器上

我有一个最小高度为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);
  }

它在emulator中工作正常，但在chrome/safari mobile上不工作。

---

有人有同样的问题吗？

是的，我在使用

vh

时也有类似的问题。这是一个好主意

---

我建议您停止在手机和平板电脑上使用

vh

，以避免此类黑客攻击。改用经典的相对

%

（百分比）值。因为我已经用

%

替换了

vh

，所以我在手机上没有这样的问题，但它需要更多的实现工作。使用

%

并非在所有情况下都很简单，但它会给您带来回报，因为您已经找到了一种解决方案，该解决方案在任何地方都能以相同的可预测方式运行。

此VueJS组件旨在解决此问题：

你的东西放在这里
从“vue-100vh”导入vue100vh
导出默认值{
组件：{vue100vh}，
}

适用于较小的百分比。。。其中rvh=“真实视口高度”

这是在一个div中，该div至少占视口高度的50%。

它不起作用时是什么样子的？我认为合适的事件名称是

方向更改

（不带

前缀）。我认为这可能会帮助您：