safari对100vh的兼容问题

需求：在以下的布局要求下，利用flex布局来实现，但需要在最外层给一个固定高度来控制页面高度及可滑动区域的可视高度

很自然的利用100vh来控制最外层的高度，但测试过程中，发现safari浏览器中，页面的高度出现了偏差，比屏幕的高度还要高出一部分，出现了双层滚动条。

经研究，发现safari的100vh是包含地址栏和功能列的，而其它浏览器100vh才是用户浏览器真正的可见区域(见下图)

解决方案

通过innerHeight重新定义一个变量代替vh

safariHacks() {
    let windowsVH = window.innerHeight / 100;
    document.querySelector('.wrap').style.setProperty('--vh', windowsVH + 'px');
    window.addEventListener('resize', function() {
        document.querySelector('.wrap').style.setProperty('--vh', windowsVH + 'px');
    });
}

在mounted内调用该方法

height: 100vh; /*給 Safari 以外的瀏覽器讀取*/
height: calc(var(--vh, 1vh) * 100);

注意–vh要写在100vh下面。。。