Vue 中判断浏览器的类型、识别浏览器

在开发过程中经常遇到的问题就是兼容性问题

项目中使用到了vue这个框架, 并且使用了一些弹性布局的的盒子, 导致项目在不同浏览器中出现样式错乱的现象

一个很简单的例子

remove()方法在 IE 中不能运行，这就需要针对 IE 单独做处理      

var userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串

    var isOpera = userAgent.indexOf("Opera") > -1;
    //判断是否Opera浏览器
    if (isOpera) {
        return "Opera"
    }; 
    //判断是否Firefox浏览器
    if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
    } 
    //判断是否chorme浏览器
    if (userAgent.indexOf("Chrome") > -1){
        return "Chrome";
    }
    //判断是否Safari浏览器
    if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
    } 
    //判断是否IE浏览器
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
        return "IE";
    }
    //判断是否Edge浏览器
    if (userAgent.indexOf("Trident") > -1) {
        return "Edge";
    };
    
      

这里需要注意的是，

我这里是在 win7 系统中打开 ie 后，ie 有一个 edge 的模块