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