使用JavaScript实现media queries检测

浏览数：11 / 时间：2015年06月09日

最近在做移动设备适配，需要根据设备加载不同的样式。开始的时候使用css3 media queries检测来引入不同的样式，但是用不支持css3的ie浏览器时就蛋疼啦。

在搜索解决这个问题是发现了这篇文章http://oklai.name/2013/05/286/，很好的解决了这个问题。

device.js

(function(){
        var UA=window.navigator.userAgent,
            detectStyle=‘<style type="text/css">@media (max-width: 640px) {#MobileDetect {color: rgb(12, 34, 56)}}</style>‘,
            detectDiv=‘<div id="MobileDetect"></div>‘;
        if(/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile/.test(UA)){
            var style=createElement(detectStyle),
                div=createElement(detectDiv);
            document.head.appendChild(style);
            document.head.appendChild(div);
            init(getStyle(div,"color")===‘rgb(12, 34, 56)‘);
            style.remove();
            div.remove();
        }else{
            init(false);
        }
        
        function init(flag){
            if(!window.zDevice)
                window.zDevice={};
            if(flag){
                window.isMobile=true;
                window.zDevice.isSmallScreen=true;
            }
        }
        
        function getStyle(oElm,strCssRule){
            var strValue="";
            if(document.defaultView&&document.defaultView.getComputedStyle){
                strValue=document.defaultView.getComputedStyle(oElm,"").getPropertyValue(strCssRule);
            }else if(oElm.currentStyle){
                strCssRule=strCssRule.replace(/\-(\w)/g,function(strMatch,p1){return p1.toUpperCase();});strValue=oElm.currentStyle[strCssRule];
            }
            return strValue;
        }
        
        function createElement(string){
            var elem=document.createElement("div");
            elem.innerHTML=string;
            return elem.childNodes[0];
        }
})();

在页面头部先引入这个js，然后根据检测结果加载不同的css样式

<html>
    <head>
        <title> </title>
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        <script type="text/javascript" src="device.js"></script>
        <script type="text/javascript">
            (function () {
                var link = document.createElement(‘link‘);
                    link.rel = ‘stylesheet‘;
                //是移动设备并且设备宽度不超过640时加载mobiel640.css
                if (zDevice.isSmallScreen) {
                    link.href = ‘mobile640.css‘;
                } else {
                    link.href = ‘web.css‘;
                }
                document.getElementsByTagName(‘head‘)[0].appendChild(link);
            })();
        </script>
    </head>
    <body>
            you code here.
    </body>
</html>