iOS 15 Safari如何动态设置height:100%避免底部栏引发页面跳动

问题原因 #

iOS 15及以上版本的Safari默认将地址栏放在底部，页面滚动时地址栏会自动伸缩，导致视口高度动态变化，使用height: 100%的固定定位元素会跟随视口高度重绘，就会出现跳动问题。

解决方案 #

• 方案1：使用小视口高度单位svh做适配
  svh是CSS规范中专门为移动浏览器伸缩栏场景设计的单位，取值为浏览器界面元素完全展开时的视口最小高度，不会随地址栏伸缩变化，iOS 15+完全支持，可做降级兼容：

.drawer {
  position: fixed;
  left: 0;
  top: 0;
  width: 85%;
  height: 100vh; /* 兼容不支持svh的旧设备 */
  height: 100svh;
}

• 方案2：抽屉展开时禁止页面滚动触发地址栏伸缩
  绝大多数场景下侧边抽屉展开时，用户不需要操作底层页面，此时锁定body滚动即可阻止地址栏伸缩，从根源避免视口高度变化：

/* 抽屉展开时给body添加该类 */
body.drawer-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

如果需要保留抽屉内部的滚动能力，给drawer元素添加overflow-y: auto即可。

• 方案3：JS动态计算固定高度
  如果需要兼容更复杂的场景，可以通过JS实时获取安全区域高度赋值给抽屉：

function setDrawerHeight() {
  const drawer = document.querySelector('.drawer')
  drawer.style.height = `${window.innerHeight}px`
}
// 页面加载、窗口大小变化、横竖屏切换时重新计算
window.addEventListener('load', setDrawerHeight)
window.addEventListener('resize', setDrawerHeight)
window.addEventListener('orientationchange', setDrawerHeight)

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