使用vw/vh单位导致网页布局偏移的问题求助

1. 先把视口配置搞对 #

移动端布局的基础是正确的meta视口标签，先检查你的HTML头部有没有这个：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

viewport-fit=cover能适配刘海屏这类异形设备，避免布局被安全区域挤变形。

2. 用自定义变量替代vh（解决键盘弹出时高度乱变） #

移动端键盘弹出时，浏览器会把键盘高度算进视口高度里，导致vh单位直接缩水。用JS动态计算可视高度，转成CSS自定义变量就能解决：

第一步：在CSS里定义变量 #

:root {
  --vh: 1vh;
}

把你原来用vh的地方全换成calc(var(--vh) * 数值)，比如height: 100vh改成height: calc(var(--vh) * 100)。

第二步：用JS动态计算并更新变量 #

function updateVH() {
  const vhValue = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vhValue}px`);
}

// 页面加载时初始化
updateVH();
// 窗口大小变化、屏幕旋转时重新计算
window.addEventListener('resize', updateVH);
window.addEventListener('orientationchange', updateVH);

这个方法是基于实际可视区域计算高度，键盘弹出触发resize时会自动更新，不会乱跳。

3. 搞定布局上移的问题 #

布局上移大概率是默认样式或滚动行为导致的：

• 先重置全局样式，清掉默认边距：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

• 如果是浏览器地址栏隐藏/显示导致的滚动偏移，页面加载时强制滚到顶部：

window.addEventListener('load', () => {
  window.scrollTo(0, 0);
});

4. 输入框的额外优化 #

如果键盘弹出后输入框附近布局错位，可监听resize事件调整滚动位置，确保输入框可见：

window.addEventListener('resize', () => {
  // 判断键盘是否弹出（Android有效，iOS部分浏览器支持）
  const keyboardOpen = window.innerHeight < window.screen.height;
  if (keyboardOpen && document.activeElement.tagName === 'INPUT') {
    document.activeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
  }
});

内容的提问来源于stack exchange，提问作者shiv ram