公众号直接链接进入页面，苹果手机底部被遮挡

最新推荐文章于 2024-07-15 20:13:26 发布

李湘湘

最新推荐文章于 2024-07-15 20:13:26 发布

阅读量141

点赞数

文章标签： css 前端 ios

本文链接：https://blog.csdn.net/qq_40255459/article/details/128953897

版权

目前只测试了12-14pro机型

解决方案

判断苹果机型和屏幕高度，根据高度判断是否是12以上机型，对css进行调整
js代码

isAnd:false,//判断机型true为安卓系统
iphone_height:false,//判断屏幕高度是不是苹果12以上
// 判断机型
        	   var u = navigator.userAgent;
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // 安卓系统
                var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // iOS系统
                if(isAndroid){
                    this.isAnd = true
                }else {
                    if(!isIOS){
                        this.isAnd = true
                    }
                }
                // 获取屏幕高度
                if(window.innerHeight>=741){
                    this.iphone_height=true;//苹果12,13,14,14pro机型
                }
                console.log('机型',this.isAnd)
        	   //判断机型end
        	   //iphone_height&&!isAnd 则是苹果12-14pro机型，适当调整css