web开发 兼容不同的屏幕分辨率和浏览器

在web开发的过程中经常会要求根据不同的屏幕大小来做兼容，尤其是webAPP的流行和各种响应式布局，兼容不同的屏幕分辨率更是前端开发者必会的技能。本篇主要介绍用CSS 的媒体查询来兼容不同的屏幕大小和用js 来兼容不同的浏览器（主要是IE、火狐、360、谷歌、UC、QQ、百度等）。

一、CSS媒体查询
使用 CSS3 的@media 查询，你可以针对不同的媒体类型定义不同的样式。它的语法结构是：

@media mediatype and|not|only (media feature) {
     CSS-Code;
 }

我们在实际开发项目中针对常见的可以这样写，比如：

/*最大屏幕分辨率为1280px*/
@media screen and (max-width:1280px){
	.content{ 
		width:20%
	}
}
/*最小屏幕分辨率为1280px且最大为1440px*/
@media (min-width: 1280px) and (max-width:1440px){
	.content{ 
		width:40%
	}
}
/*最小屏幕分辨率为1440px且最大为1680px*/
@media (min-width: 1440px) and (max-width:1680px){
	.content{ 
		width:60%
	}
}
/*最小屏幕分辨率为1920px*/
@media screen and (min-width:1920px){
	.content{ 
		width:100%
	}
}

将类名针对不同的屏幕大小写在对应的媒体查询内容中，系统会根据不同的样式内容在浏览器里做出响应式变化，此方法也常用于适应兼容不同的移动设备。

二、js判断浏览器内核
在实际开发项目中，同样的屏幕分辨率宽度但由于各个浏览器的内核或者菜单栏导航栏显示内容的不同，所呈现的网页效果会有差别，所以需要判断不同的浏览器内核来在样式上做区别。在响应式布局中，有些高度和宽度都需要用百分比来做适应，那这个时候的高度我们可以在不同的浏览器里做个对比：

 checkBrowser();//判断浏览器
function checkBrowser() {
    var ua = navigator.userAgent.toLocaleLowerCase();
    var screenWidth=window.screen.width;
    var bodyHeight=$("body").height();
    console.log("屏幕宽度 "+screenWidth);
    console.log("内容高度 "+bodyHeight);
    var browserType = null;
    if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
        browserType = "IE";
        browserVersion = ua.match(/msie ([\d.]+)/) != null ? ua.match(/msie ([\d.]+)/)[1] : ua.match(/rv:([\d.]+)/)[1];
        //针对IE浏览器在此处写入样式
        // CSS-Code;
    } else if (ua.match(/firefox/) != null) {
        browserType = "火狐";
            //针对火狐浏览器在此处写入样式
        // CSS-Code;
    } else if (ua.match(/ubrowser/) != null) {
        browserType = "UC";
          //针对UC浏览器在此处写入样式
        // CSS-Code;
    } else if (ua.match(/opera/) != null) {
        browserType = "欧朋";
  	 //针对欧朋浏览器在此处写入样式
        // CSS-Code;
    } else if (ua.match(/bidubrowser/) != null) {
        browserType = "百度";
         //针对百度浏览器在此处写入样式
        // CSS-Code;
    } else if (ua.match(/metasr/) != null) {
        browserType = "搜狗";
         //针对搜狗浏览器在此处写入样式
        // CSS-Code;
    } else if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
        browserType = "QQ";
         //针对QQ浏览器在此处写入样式
        // CSS-Code;
    } else if (ua.match(/maxthon/) != null) {
        browserType = "遨游";
         //针对遨游浏览器在此处写入样式
        // CSS-Code;
    } else if (ua.match(/chrome/) != null) {
        var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");
        if (is360) {
            browserType = '360';
        } else {
            browserType = "谷歌";
        }
    } else if (ua.match(/safari/) != null) {
        browserType = "Safari";
    }
    function _mime(option, value) {
        var mimeTypes = navigator.mimeTypes;
        for (var mt in mimeTypes) {
            if (mimeTypes[mt][option] == value) {
                return true;
            }
        }
        return false;
    }
    console.log(browserType);
    return browserType;//返回浏览器类型
}