移動端爬坑總結

1、ios系統下input框獲取焦點後點擊空白處不失去焦點

　　今天寫完項目測試時忽然發現ios系統input框獲取焦點激活軟鍵盤彈起後點擊空白處軟鍵盤怎麼都不下去，最後發現原來是點擊空白處input框根本就沒有失去焦點的問題；而後放在android系統下測試並不存在此問題。

　　解決方案：手動添加程序監聽input的獲取與失去焦點事件，獲取焦點時綁定touchend事件，當touchend事件觸點在空白處讓其input框失去焦點便可

objBlurFun("input");
//若是不是當前觸摸點不在input上,那麼都失去焦點
function objBlurFun(sDom,time){
    var time = time||300;
    //判斷是否爲蘋果
    var isIPHONE = navigator.userAgent.toUpperCase().indexOf("IPHONE")!= -1;
    if(isIPHONE){
        var obj = document.querySelectorAll(sDom);
        for(var i=0;i<obj.length;i++){
            objBlur(obj[i],time);
        }


    }
}

// 元素失去焦點隱藏iphone的軟鍵盤
function objBlur(sdom,time){
    if(sdom){
        sdom.addEventListener("focus", function(){
            document.addEventListener("touchend", docTouchend,false);
        },false);

    }else{
        throw new Error("objBlur()沒有找到元素");
    }
    var docTouchend = function(event){
        if(event.target!= sdom){
            setTimeout(function(){
                sdom.blur();
                document.removeEventListener('touchend', docTouchend,false);
            },time);
        }
    };
}

2、input框獲取焦點後軟鍵盤彈起壓縮可視界面使其佈局錯亂

　　1）移動端原本自信滿滿，正得意本身完美的佈局時，每每卻被彈起的軟鍵盤而打亂。此次項目中碰見fixed定位的返回主頁按鈕在軟鍵盤升起時因可視界面被壓縮致使fixed定位的元素佈局錯亂

　　解決方案：因軟鍵盤從下方彈起，因此咱們能夠把fixed定位的元素相對頂部定位就能夠避免此問題了

　　2）常見狀況：底部footer採用fixed定位在最底處，安卓機軟鍵盤彈起時將底部footer也隨之頂起

　　解決方案：

　　1.設定body的高度始終爲軟鍵盤彈起前的可視界面高度

$('body').height($('body')[0].clientHeight);

　　2.將footer佈局由fixed定位改成absolute定位，並且是相對body定位的

body{
  position:relative    
}

footer{
　　position:absolute;
　　left:0;
　　right:0;
　　bottom:0;
}

　　

　　

3、fixed定位的元素在父元素transform屬性值不爲none時失效

　　規範中規定若是元素的transform值不爲none，則該元素會生成包含塊和層疊上下文，使其fixed定位、absolute定位元素和層疊上下文(index)受到影響

　　transform規範

　　解決方案：不要將fixed定位的元素放在擁有transform屬性的元素內部

4、滾動條樣式不統一

　　移動端當內容超出固定高度容器出滾動條時，在安卓手機下滾動條樣式較粗，很是難看，在蘋果手機下沒有滾動條，同時滾動時有阻塞感，滑動不暢；

　　解決方案：使用第三方組件如：iscroll、mui等

5、chrome瀏覽器下顯示的最小字體爲12px

　　由於chrome瀏覽器使用的爲webkit內核，添加如下代碼便可：

html { -webkit-text-size-adjust:none }  

6、img標籤在塊元素中底部有3px的空白

img{
  display:block;  
}

7、inline－block元素橫排時元素之間有間隙

　　起因：間隙因爲換行或者回車產生空白符所致

　　方法一：

　　1）給父元素設置font-size:0;

　　2) 給inline-block元素設置實際須要的字體大小

　　方法二：

　　將元素寫在一排顯示

<ul>
       <li>111</li>
       <li>222</li>
       <li>333</li>
       <li>444</li>
       <li>555</li>
       <li>666</li>         
</ul>

ul{
  font-size:0  
}

li{
  font-size:12px;  
}