VH 无法在手机上运行 - JavaScript

在前端开发中，我们经常使用 vh 单位来设置元素的高度，该单位表示视窗高度的百分比。然而，在手机上使用 vh 单位可能会出现一些问题，如布局错乱或元素高度过高或过低等。

这是由于在手机上，浏览器的地址栏、工具栏等会占用一定的空间，这些区域并不计算在视窗高度之内，因此 vh 单位的计算结果会受到影响。当我们在手机上使用 vh 单位时，需要特别注意这个问题。

为了解决这个问题，我们可以使用 JavaScript 来动态计算视窗高度并设置元素的高度。具体的方法如下：

function setHeightByVh(selector, height) {
  const vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  const element = document.querySelector(selector);
  element.style.height = `${(vh * height) / 100}px`;
}

上述代码中的 setHeightByVh 函数接受两个参数，第一个参数是选择器，用于选择要设置高度的元素，第二个参数是百分比的值，表示要设置的元素高度占视窗高度的百分比。该函数首先通过 document.documentElement.clientHeight 和 window.innerHeight 获取视窗高度，并取最大值作为 vh 的值。然后根据传入的百分比计算元素的高度，并设置到元素的 style 属性中。

使用代码示例：

// 选择要设置高度的元素
const element = document.querySelector('.my-element');
// 设置元素的高度为视窗高度的 50%
setHeightByVh('.my-element', 50);

这样，我们就可以在手机上使用 JavaScript 动态计算元素高度，避免了使用 vh 单位可能出现的问题。