關於ios的safari下,頁面底部彈出登錄遮罩層,呼出軟鍵盤時 問題解決

前陣子遇到了一個問題,就是手機端頁面彈出遮罩+底部登錄的彈出層。css

通常狀況下就直接給fixed固定定位了,然而作測試時發現了一個很大的問題 html

iOS的safari下,固定定位會跑到整個頁面的最底部,而不是當前頁的最底部。前端

查了好多百度然而仍是沒有找到有用的解決方案,後來問了一位前端的大神,大神說這種狀況下,須要區分兩種狀態,ios

一是默認狀態,即 除了safari以外的其餘瀏覽器(須要判斷一下瀏覽器是否爲safari)瀏覽器

二是 safari瀏覽器狀態下,(因爲公司只要求測UC,QQ瀏覽器,顧,發現  在ios下的QQ瀏覽器裏,判斷時也會得出是safari,因此在寫判斷時,注意處理下手機QQ瀏覽器)測試

先寫判斷瀏覽器的事件:spa

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"; }
}

而後在寫具體彈出的事件code

//========點擊。。彈出彈出框=================htm

//========點擊。。彈出彈出框=================
    //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()); } });

阿西吧,然而仍是有些細節問題跟默認狀況下不同   還好產品大大沒有再死摳這個問題。。。
相關文章
相關標籤/搜索