Check if Media Query has fired, device orientation and device type (via categorizr classes)

deviceorientation.js

DASEFX ={
	common:{
		init: function(){
                       //using http://benalman.com/code/projects/jquery-throttle-debounce/docs/files/jquery-ba-throttle-debounce-js.html
			$(window).resize( $.throttle( 250, true, function(e){
		        log('resized');
		        DASEFX.common.MediaQueryCheck();
		    }));
			
		},
		MediaQueryCheck : function(){
// see http://bricss.net/post/22198838298/easily-checking-in-javascript-if-a-css-media-query-has
			var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
// see https://github.com/Skookum/categorizr.js			
if (size == 'mobile' && isMobile()) {
			    log('mobile MQ fired');
			    DASEFX.common.OrientationCheck();
			} else if(size == 'tablet' && isTablet()){
				log('tablet MQ fired');
				DASEFX.common.OrientationCheck();
			} else{
				//must be bigger then 768 - desktop experience please.
				log('desktop MQ fired');
				DASEFX.common.OrientationCheck();
			}
		},
		OrientationCheck : function(){
			// detect device orientation 
			var supportsOrientationChange = "onorientationchange" in window,
			    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

			window.addEventListener(orientationEvent, function() {
				var orientation = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';	
				log(orientation);				    
			}, false);
		}
	}
}

mediaqueries.css

/* see http://bricss.net/post/22198838298/easily-checking-in-javascript-if-a-css-media-query-has */
body:after{
   content:'desktop';display:none;	
}
@media only screen (max-width: 767px) {
   body:after{
       content:'mobile';display:none;	
   }	
}