解决IOS引入H5页面Safari浏览器工具栏会遮挡页面底部展示

解决IOS引入H5页面Safari浏览器工具栏会遮挡页面底部展示

问题图片展示

现在可以看到 底部遮住了

因为这个项目是IOS和Android共同接入的一套代码，在网上找了一些解决方法后，以下是我的处理方式

//使用计算属性  减去底部工具栏的高度
height: calc(100vh - 75px);  

完整的解决片段

<div :class="isClass = 'ios' ? 'QYZXIOS' : 'QYZX'">
 //此处内容省略
</div>
   data(){
     return {
           isClass:'',
            }
        },
    created(){
            this.isAndroidOrIOS()
        },
    methods:{
    //因为不想改到android的样式   所以这里判断一下
            isAndroidOrIOS() {
                var u = navigator.userAgent;
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
                var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                if (isAndroid) {
                    this.isClass = "android"
                    console.log("android>>>>");
                    
                    return this.isClass 
                }
                if (isiOS) {
                    console.log("ios>>>>");
                    
                     this.isClass = "ios"
                    return this.isClass 
                }
                
                return false
            }
            }
  <style scoped>
    .QYZX{
        background:rgba(40, 44, 52, .6);
        z-index: 999;
        height: 100vh;
        width: 100%;
        padding:10% 7%;
        position: fixed;
        top:0;
        left: 0;
        }
    .QYZXIOS{
        background:rgba(40, 44, 52, .6);
        z-index: 999;
        height:(100vh - 75px);    //使用计算属性  减去底部工具栏的高度
        width: 100%;
        padding:10% 7%;
        position: fixed;
        top:0;
        left: 0;
    }

最后效果展示