在javascript中使用媒體查詢media query

由於需要，我們可能會在js中用到一些media query，從而針對不同的分辨率做一些操作。

//全兼容的 事件綁定  and  阻止默認事件
    var EventUtil = {
//Notice: type is not include 'on', for example: click mouseover mouseout and so on
        addHandler: function(element, type, handler){
            if (element.addEventListener){
                element.addEventListener(type, handler, false);
            } else if(element.attachEvent){
                element.attachEvent('on'+type, handler);
            } else {
                element['on'+type] = handler;
            }
        },

        preventDefault: function(event){
            if(event.preventDefault){
                event.preventDefault();
            }else{
                event.returnValue = false;
            }
        }
    };
    var mediaQuery = {
        init:function(){
            var _this = this;
            _this.outputSize();
            EventUtil.addHandler(window,"resize",function(){
                _this.outputSize(); //前面的this要單獨保存，否則在這里this指的是window
            });
        },
        outputSize:function(){
            var result1 = window.matchMedia('(min-width:1200px)');
            var result2 = window.matchMedia('(min-width:992px)');
            var result3 = window.matchMedia('(min-width:768px)');
//console.log(window.innerWidth);
            //console.log(result.matches);
            if(result1.matches) {
                console.log(">=1200 大型設備 大台式電腦");
            }else if(result2.matches){
                console.log("992=< <=1200 中型設備 台式電腦");
            }else if(result3.matches){
                console.log("768<= <=992 小型設備 平板電腦");
            }else{
                console.log("<=768 超小設備 手機");
            }
        }
    };
    window.onload = function(){
        mediaQuery.init();
    };