移动端滚动时如何阻止背景视频尺寸变化？

手机端浏览器地址栏弹出或收起时，页面视口高度会动态变化，导致背景视频出现尺寸异常。现有调整宽高、位置属性的尝试未解决问题，原CSS代码如下：

html {
  overflow: hidden;
  height: 100%;
}

body {
  font-family: "Roboto", sans-serif;
  height: 100vh;
  width: 100%;
  overflow: auto;
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  min-height: 100%;
  z-index: -1;
  object-fit: cover;
}

解决方案 #

• 统一html与body的高度计算方式，避免100vh在浏览器栏变化时的计算偏差：

  html {
    overflow: hidden;
    height: 100%;
  }
  
  body {
    font-family: "Roboto", sans-serif;
    height: 100%;
    width: 100%;
    overflow: auto;
  }
  

• 优化视频元素的定位规则，确保其始终覆盖整个视口：

  #myVideo {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
  }
  

原理说明 #

100vh的计算会包含浏览器的状态栏/地址栏高度，当地址栏收起时，视口实际可用高度变化，但100vh的数值不会同步调整，导致视频尺寸错位。将body高度改为100%，配合视频元素的fixed定位并设置四边为0，能让视频始终贴合当前视口的边界，object-fit: cover则保证视频在保持比例的同时完全覆盖视口区域。

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