移动端100vh超出页面出现滚动条问题

当移动端想要占满屏幕时通常会使用100vh,但是在手机端访问网站时会发现超出的屏幕宽度并出现了滚动条。这是因为移动浏览器（Chrome和Safari）地址栏有时可见有时隐藏，从而改变了视口的可见大小。当视口高度变化时，这些浏览器没有将100vh的高度调整为屏幕的可见部分的高度，而是将100vh设置为隐藏了地址栏的浏览器的高度（其实就是100vh高度没变，但是地址栏那块把内容顶出去了一块）。结果导致：当地址栏可见时，屏幕的底部将被切断，从而破坏了开始时100vh的目的。

解决方案1：给html元素设置css变量

let fullHeight = window.innerHeight


window.addEventListener('resize',()=>{
    fullHeight = window.innerHeight;
    document.documentElement.style.setProperty('--fullHeight',`${fullHeight}px`);
})

document.documentElement.style.setProperty('--fullHeight',`${fullHeight}px`);

 然后在需要全屏的页面使用变量

.app{
  width: 100%;
  height:var(--fullHeight);
  background:pink;
  overflow:hidden;
}

结局方案2：使用dvh单位(需要考虑兼容性)