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有类似的问题。这是一个known problem。

我的建议是停止在手机和平​​板电脑上使用vh，以避免这些黑客攻击。请改用经典的相对%（百分比）值。由于我用vh取代了%，我在移动设备上没有这样的问题，但它需要更多的实施工作。在所有情况下使用%都不是直截了当的，但它会让你回报，因为你有一个解决方案，它以相同的可预测方式在各处运行。