如何防止移动端浏览器UI伸缩时fixed定位元素发生移位？

方案1：JavaScript监听视口变化动态设置高度 #

移动端浏览器地址栏的显示/隐藏会改变实际可用视口高度，lvh的计算在部分浏览器中存在延迟或偏差，通过JS实时获取视口高度并赋值是最可靠的方式。

// 初始化并更新元素高度
function updateFixedHeight() {
  const fixedEl = document.querySelector('.fixed-element');
  if (fixedEl) fixedEl.style.height = `${window.innerHeight}px`;
}

// 页面加载时执行
window.addEventListener('load', updateFixedHeight);
// 监听视口尺寸变化
window.addEventListener('resize', updateFixedHeight);
// 监听滚动触发的视口变化（部分浏览器滚动时地址栏变化不触发resize）
window.addEventListener('scroll', updateFixedHeight);

配合基础CSS：

.fixed-element {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 移除height:100lvh，由JS动态控制 */
}

方案2：用dvh单位替代lvh #

dvh（Dynamic Viewport Height）是CSS新增的动态视口单位，会实时跟随浏览器的实际可用视口高度变化（包括地址栏伸缩场景），目前兼容性已覆盖Chrome 108+、Safari 15.4+等主流移动端浏览器。

.fixed-element {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
}

方案3：使用inset: 0自动填充视口 #

用inset: 0替代手动设置top/left/width/height，让元素自动填充整个视口，避免高度计算偏差，同时配合溢出处理保证内容正常展示。

.fixed-element {
  position: fixed;
  inset: 0; /* 等价于top:0; right:0; bottom:0; left:0 */
  overflow-y: auto; /* 内容超出视口时允许滚动 */
}

方案4：禁用地址栏自动隐藏（谨慎使用） #

如果业务场景允许，可通过设置viewport元标签锁定缩放比例，部分浏览器会停止自动隐藏地址栏，但该方式会牺牲用户缩放体验，仅适合特定场景。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

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