使用JavaScript实现media queries检测

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

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

device.js

使用JavaScript实现media queries检测
(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];
        }
})();
使用JavaScript实现media queries检测

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

使用JavaScript实现media queries检测
<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>
使用JavaScript实现media queries检测

使用JavaScript实现media queries检测

上一篇:MVC3 - 控制器


下一篇:阿里云峰会 | 来听听达摩院技术专家是怎么讲智能外呼机器人技术