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判断浏览器内核
在实际开发项目中，同样的屏幕分辨率宽度但由于各个浏览器的内核或者菜单栏导航栏显示内容的不同，所呈现的网页效果会有差别，所以需要判断不同的浏览器内核来在样式上做区别。在响应式布局中，有些高度和宽度都需要用百分比来做适应，那这个时候的高度我们可以在不同的浏览器里做个对比：
360浏览器
谷歌浏览器
IE浏览器
在同样的屏幕分辨率下，可以看出，360的内容高度是891px，谷歌是908px，IE是886px，这样就导致我们在做高度自适应时效果上会有差异，针对解决这一问题，我们来用js判断浏览器内核，根据不同的内核做样式调整：
（注：原生Chrome中存在一种MimeType“application/vnd.chromium.remoting-viewer”，由此可以判断浏览器是加壳Chrome或是原生Chrome。）

 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;//返回浏览器类型
}

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

猜你喜欢

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