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

2024年2月9日 139次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞