关于ios的safari下，页面底部弹出登陆遮罩层，呼出软键盘时 问题解决

Posted 2020-08-24 微凉_1993

前阵子遇到了一个问题，就是手机端页面弹出遮罩+底部登陆的弹出层。

一般情况下就直接给fixed固定定位了，然而做测试时发现了一个很大的问题 

ios的safari下，固定定位会跑到整个页面的最底部，而不是当前页的最底部。

查了好多百度然而还是没有找到有用的解决方案，后来问了一位前端的大神，大神说这种情况下，需要区分两种状态，

一是默认状态，即 除了safari之外的其他浏览器（需要判断一下浏览器是否为safari）

二是 safari浏览器状态下，（由于公司只要求测UC,QQ浏览器，顾，发现  在ios下的QQ浏览器里，判断时也会得出是safari,所以在写判断时，注意处理下手机QQ浏览器）

先写判断浏览器的事件：

function myBrowser(){ 
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 
var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") < 1 && userAgent.indexOf("MQQ") < 0; //判断是否Safari 
//alert(userAgent);
if(isSafari){ return "Safari"; }
}

然后在写具体弹出的事件

//========点击。。弹出弹出框=================

//========点击。。弹出弹出框=================
    //index-个人中心       默认安卓
    $(".ic_per").click(function() {
　　　　　//safari
        if(myBrowser()=="Safari"){
//            alert("这是safari");
            A.zhezhao();
            $(‘#login_box‘).fadeIn(500);
            $("html,body,.mask-layer").height($(window).height());
            $(".mask-layer").height($(document).height());
            $(‘.mask-layer‘).css(‘position‘, ‘absolute‘);
            var dltop = $(document).scrollTop() + $(window).height() - 275;
            $("#login_box").height($(document).height());
            console.log(dltop);
            console.log($("#login_box").height());
            $(‘#login_box‘).css({
                "position": "absolute",
                "top": dltop + "px",
                "height": $(document).height()
            });
        } 
　　　　　//其他浏览器
        else {
//            alert("这是別的");
            A.zhezhao_in();
            //弹出框系列
            $(‘#login_box‘).fadeIn(500);
            $("body,.mask-layer").height($(window).height());
        }    
    });

阿西吧，然而还是有些细节问题跟默认情况下不一样   还好产品大大没有再死抠这个问题。。。