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 mobile。有没有人有同样的问题？

Answer 1

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

我的建议是停止在手机和平板电脑上使用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 =“实际视口高度”。

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

Vuejs：移动浏览器上的100vh

2 个答案: