如何将移动端所有vh单位替换为固定像素值？

我之前也踩过vh适配的大坑，尤其是Android软键盘压缩视口、Safari地址栏显示/隐藏导致布局跳变的问题，简直让人头大！下面分享几个实用的方法，帮你把vh单位替换成稳定的固定像素值：

方法一：JavaScript动态转换（精确匹配初始vh效果） #

这个方法会在页面加载时获取初始视口高度，然后把所有使用vh的元素属性转换成对应的固定像素，后续不再受视口变化影响：

步骤1：标记需要转换的元素 #

给所有用了vh单位的元素加一个统一的类名，比如uses-vh，方便后续批量处理：

<div class="header uses-vh">...</div>
<p class="content uses-vh">...</p>

步骤2：编写转换脚本 #

在页面加载完成后执行转换逻辑，确保获取的是初始视口高度（避免软键盘或地址栏干扰）：

document.addEventListener('DOMContentLoaded', function() {
  // 获取页面刚加载时的视口高度，作为基准
  const initialViewportHeight = window.innerHeight;
  // 选中所有需要转换的元素
  const vhElements = document.querySelectorAll('.uses-vh');

  vhElements.forEach(element => {
    const computedStyle = window.getComputedStyle(element);

    // 转换height属性
    if (computedStyle.height.includes('vh')) {
      const vhRatio = parseFloat(computedStyle.height) / 100;
      element.style.height = `${vhRatio * initialViewportHeight}px`;
    }

    // 转换font-size属性
    if (computedStyle.fontSize.includes('vh')) {
      const vhRatio = parseFloat(computedStyle.fontSize) / 100;
      element.style.fontSize = `${vhRatio * initialViewportHeight}px`;
    }

    // 按需转换其他属性：width、top、left、padding等
    if (computedStyle.width.includes('vh')) {
      const vhRatio = parseFloat(computedStyle.width) / 100;
      element.style.width = `${vhRatio * initialViewportHeight}px`;
    }
  });
});

注意：如果页面有动态生成的元素，记得在元素生成后重新调用这段转换逻辑。

方法二：媒体查询+固定像素（兼容性强，无需JS） #

如果不想用JS，可以针对不同设备的屏幕高度，直接设置固定像素值，模拟vh的适配效果：

/* 小屏手机（比如iPhone SE） */
@media (max-height: 600px) {
  .header {
    height: 60px;
    font-size: 16px;
  }
  .content {
    padding: 20px;
    font-size: 14px;
  }
}

/* 中屏手机（比如iPhone 13） */
@media (min-height: 601px) and (max-height: 800px) {
  .header {
    height: 80px;
    font-size: 18px;
  }
  .content {
    padding: 25px;
    font-size: 16px;
  }
}

/* 大屏设备（平板、大屏手机） */
@media (min-height: 801px) {
  .header {
    height: 100px;
    font-size: 20px;
  }
  .content {
    padding: 30px;
    font-size: 18px;
  }
}

这种方法的好处是无需依赖JS，兼容性拉满，缺点是需要根据主流设备高度手动调整像素值，适配范围有限。

方法三：用CSS变量锁定初始视口高度（折中方案） #

如果你不想完全放弃vh的弹性，但又想避免视口变化导致的跳变，可以用CSS变量存储初始视口高度，然后用calc()替换vh：

// 页面加载时设置初始视口高度的CSS变量
document.addEventListener('DOMContentLoaded', function() {
  const initialVh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--initial-vh', `${initialVh}px`);
});

然后在CSS中把Xvh替换成calc(var(--initial-vh) * X)：

.header {
  height: calc(var(--initial-vh) * 10); /* 等价于原来的10vh，但固定为初始视口的10% */
  font-size: calc(var(--initial-vh) * 2); /* 等价于原来的2vh */
}

这个方案既保留了vh的比例感，又不会因为后续视口变化（软键盘、地址栏）导致布局缩放。

内容的提问来源于stack exchange，提问作者Preet Dalal