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

最新推荐文章于 2024-04-20 03:12:15 发布

原创最新推荐文章于 2024-04-20 03:12:15 发布 · 1.1w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#css #js #vue #html #android

本文介绍了如何处理在iOS设备上，Safari浏览器加载H5页面时，底部工具栏遮挡页面内容的问题。通过使用CSS的calc()函数减去工具栏高度，实现了动态适配，确保页面内容完整显示。同时，代码示例展示了在Vue.js中针对Android和iOS设备的差异化处理。

解决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;
    }