解决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;
}
最后效果展示