跨浏览器兼容写法

注释判断

考虑到软件维护的开闭原则，一个在IE下使用正常的Web应用需要支持webkit内核时，最简单的方法是重新做一套webkit内核的版本。除了在js中判断的方案外，还有更简单的html判断注释方法。

html

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

javascript判断

这个方法可以比较方便的判断IE不同版本和非IE的浏览器。更进一步的判断需要借助javascript：

javascript

function judge(){    
    var browser = {
        versions: function() {
                var u = navigator.userAgent, app = navigator.appVersion;
                return {//移动终端浏览器版本信息
                    trident: u.indexOf('Trident') > -1, //IE内核
                    presto: u.indexOf('Presto') > -1, //opera内核
                    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
                    iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                    webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
                };
             }(),
        language: (navigator.browserLanguage || navigator.language).toLowerCase()
    }
    console.log(browser.language)
    if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
        // window.location="www.zhongsou.com";
    }else if (browser.versions.android) {
        // window.location="http://www.baidu.com";
    }
}
var bb=new judge();

判断客户端

更进一步，我们可能不止需要判断浏览器，还需要判断客户端设备。

javascript

var u = navigator.userAgent; 
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 
if (isAndroid) {
  alert('这是Android'); 
}
if (isiOS) {
  alert('这是IOS'); 
}

判断操作系统

虽然不是很常见的需求，有时可能需要知道浏览器客户端运行时的操作系统（比如按需加载特殊字体、加载操作系统相关控件、驱动等等）。

javascript

function detectOS() {
  var sUserAgent = navigator.userAgent;
  var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
  var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");
  if (isMac) return "Mac";
  var isUnix = (navigator.platform == "X11") && !isWin && !isMac;
  if (isUnix) return "Unix";
  var isLinux = (String(navigator.platform).indexOf("Linux") > -1);
  if (isLinux) return "Linux";
  if (isWin) {
    var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 ||sUserAgent.indexOf("Windows 2000") > -1;
    if (isWin2K) return "Win2000";
    var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1;
    if (isWinXP) return "WinXP";
    var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1;
    if (isWin2003) return "Win2003";
    var isWinVista= sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1;
    if (isWinVista) return "WinVista";
    var isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1;
    if (isWin7) return "Win7";
  }
   return "other";
 }
alert("您的操作系统是：" + detectOS());

微信浏览器

最后加一个特殊判断：是否是在微信中打开。

javascript

function is_weixin(){ 
  var ua = navigator.userAgent.toLowerCase(); 
  if(ua.match(/MicroMessenger/i)=='micromessenger') { 
    alert('在微信里打开'); 
  } else { 
     alert('不在微信里打开'); 
  } 
 }
 is_weixn();
 `