移动浏览器100vh高度未适应屏幕大小

原因：移动浏览器具有“帮助”功能，其中地址栏有时可见，有时隐藏，从而改变了视口的可见大小。这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为浏览器的高度，并隐藏了地址栏。当地址栏显示时，原有屏幕底部内容就显示不完全。                                       处理：可使用js来处理这个问题，思路是通过页面初始化时window.innerHeight可见区域高度来计算1vh的大小，结合样式计算实现具体高度变化。

js代码如下：

// 页面初始化时调用
function initAppVh() {
   // 获取视口区域高度并将其乘以1%以获得1vh单位的值
   let vh = window.innerHeight * 0.01;
   // 然后将——vh自定义属性中的值设置为文档的根
   document.documentElement.style.setProperty('--vh', `${vh}px`);
   // 监听窗口resize事件 视图大小发生变化就重新计算1vh的值
   window.addEventListener('resize', () => {
     // 执行与前面相同的脚本计算1vh的值
     let vh = window.innerHeight * 0.01;
     document.documentElement.style.setProperty('--vh', `${vh}px`);
   });
}

css代码如下：

height: calc(var(--vh, 1vh) * 100)

网络处理资料，备份下来方便查找，另外样式处理可参考：CSS fix for 100vh in mobile WebKit - Matt Smith