h5页面height设置100vh在safari浏览器显示问题和安卓对比一下

看图:

 

 没错,  ios默认浏览器   100vh 包含了 工具栏;  安卓却不包含

解决1：
               

 height:100vh 改为 height: 100%      前提你父级元素也要100%

 

解决2：
mounted中加入safariHacks()函数，监控可视区样式，重新定义页面高度

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

解决3：
使用postcss-100vh-fix 插件

npm install --save-dev postcss postcss-100vh-fix

 

module.exports = {
  plugins: [
    require('postcss-100vh-fix')
  ]
}

 

参考链接传送门