移动设备上的视口高度 (100vh) 会导致不必要的滚动

Question

我正在 Angular 10.

开发手机主题

并且我已经使用 vh 设置组件的高度。

我的应用非常复杂，我在 vh 的数百个位置设置了高度。将每个高度更改为 px's 或 % 对我来说是不可能的。

我完全知道这个问题不是新问题，不同论坛上有很多解决方案。但是 none 对我有用。

我使用了以下脚本。但是我得到错误 --vh is undefined.

<script>
     window.addEventListener('resize', () => {
      // We execute the same script as before
      let vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', `${vh}px`);
    });
  </script>
  <style>
    body {
      height: calc(var(--vh, 1vh) * 100);
    }
  </style>

即使我设法让它工作，我也必须在很多地方改变它，这对我来说是不可能的。

如有任何建议，我们将不胜感激。

谢谢。

Answer 1

几件事。

首先是设置CSS变量--vh的代码。它需要运行在初始和任何后续加载以及调整大小时：

function resize() {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

window.addEventListener('resize', resize);
window.addEventListener('load', resize);

body {
  height: calc(var(--vh, 1vh) * 100);
}

<body>
</body>

其次，将 vh 的使用更改为 --vh。

我猜你需要设置一个编辑宏，或者只设置一个查找和替换并手动转到下一个，因为你可能想检查你是否有正确的替换。

例如对于 80vh，你会想要 calc(var(--vh) * 80); 实际上，我已经在一个项目中完成了它并且还不错，但我没有你提到的数百个。幸运的是 vh 是一个不常见的字符串，所以不难找到下一个。

移动设备上的视口高度 (100vh) 会导致不必要的滚动

viewport height (100vh) on mobile leads to unwanted scroll

css

height

viewport

angular