那些年我遇到过的兼容性问题

2019年8月31日 115次阅读 来源: CathyZYF

每次面试时常被问到兼容题目的处理，偶然本身遇到过的题目居然也忘记了是怎样处理的，干脆本日把它们记录下来。

1、chrome浏览器下不支撑字体小于12像素

经由过程transform:scale(0.8)这个css3属性来处理

2、一些挪动端装备不支撑vedio和audio的自动播放

处理要领是先经由过程用户 touchstart 触碰，触发播放并停息（音频最先加载，背面用 JS 再操纵就没题目了）
以下是代码：

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

3、ios体系下单击事宜有300ms的延时

涌现这个题目，是因为ios体系下有一个默许的双击放大页面(double tap to zoom)的计划，因此在检测到第一个用户tap事宜后，会hold一段时刻，若在此时刻内又检测到新的tap，则推断为双击事宜，反之则推断为单击事宜，而这个耽误的时刻就是300ms摆布。

处理计划：FastClick 是 FT Labs 特地为处理挪动端浏览器 300 毫秒点击耽误题目所开辟的一个轻量级的库。FastClick的完成道理是在检测到touchend事宜的时刻，会经由过程DOM自定义事宜马上动身模仿一个click事宜，并把浏览器在300ms今后的click事宜阻挠掉。

4、低版本浏览器不支撑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;
}

5、原生ajax中低版本ie不支撑xmlhttprequest对象

处理要领是做一个推断，如果有xmlhttprequest要领，则挪用，若没有，则改用ie浏览器的ActiveXobject要领：

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

以上就是我能想到的，今后如有新题目，我会继承更新，谢谢关注。

    原文作者：CathyZYF
    原文地址: https://segmentfault.com/a/1190000008273749
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞