那些年我遇到過的兼容性問題

每次面試時常被問到兼容問題的解決，有時本身遇到過的問題居然也忘記了是怎麼解決的，索性今天把它們記錄下來。

一、chrome瀏覽器下不支持字體小於12像素

經過transform:scale(0.8)這個css3屬性來解決

二、一些移動端設備不支持vedio和audio的自動播放

解決方法是先經過用戶 touchstart 觸碰，觸發播放並暫停（音頻開始加載，後面用 JS 再操做就沒問題了）
如下是代碼：

document.addEventListener('touchstart',function() {
    document.getElementsByTagName('audio')[0].play();
    document.getElementsByTagName('audio')[0].pause();
});

三、ios系統下單擊事件有300ms的延時

出現這個問題，是因爲ios系統下有一個默認的雙擊放大頁面(double tap to zoom)的方案，所以在檢測到第一個用戶tap事件後，會hold一段時間，若在此時間內又檢測到新的tap，則判斷爲雙擊事件，反之則判斷爲單擊事件，而這個延遲的時間就是300ms左右。

解決方案：FastClick 是 FT Labs 專門爲解決移動端瀏覽器 300 毫秒點擊延遲問題所開發的一個輕量級的庫。FastClick的實現原理是在檢測到touchend事件的時候，會經過DOM自定義事件當即出發模擬一個click事件，並把瀏覽器在300ms以後的click事件阻止掉。

四、低版本瀏覽器不支持getElementByClassName

解決方法是重寫一個getByClass()函數：

function getByClass(obj,sClass){
    var aResult = [];
    if(obj.getElementsByClassName){
        aResult = obj.getElementsByClassName(sClass);
    }else{
        var aEle = obj.getElementsByTagName('*');
        for(var i=0;i<aEle.length;i++){
            var aClass = aEle[i].className.split(' ');
            if(findInArr(aClass,sClass)){   //調用自定義的findArr方法
                aResult.push(aEle[i]);
            }
        }
    }
    return aResult;
}
function findInArr(arr,sClass){
    for(var i=0;i<arr.length;i++){
        if(arr[i]==sClass){
            return true;
        }
    }
    return false;
}

五、原生ajax中低版本ie不支持xmlhttprequest對象

解決方法是作一個判斷，若是有xmlhttprequest方法，則調用，若沒有，則改用ie瀏覽器的ActiveXobject方法：

if(window.XMLHttpRequest){
  var oAjax=window.XMLHttpRequest
}else{
  var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}

以上就是我能想到的，之後如有新問題，我會繼續更新，感謝關注。