JS - Match Media Function

matchmedia.js

/*

JS - Media Match Function

Use JavaScript's matchMedia Method to detect the type of device you are using, and invoke/activate functions based on those criteria.

Reference Links:
http://davidwalsh.name/orientation-change
http://davidwalsh.name/device-state-detection-css-media-queries-javascript
http://www.slideshare.net/DavidKnight5/howto-match-media-25008199
http://caniuse.com/matchmedia

*/

    var design;
        if (window.matchMedia('only screen and (max-device-width: 320px)').matches) {
            design = 'touch';
        } else if (window.matchMedia('only screen and (max-device-width: 1024px)').matches) {
            design = 'tablet';
        } else if (window.matchMedia('screen').matches) {
            design = 'desktop';
        } else if (window.matchMedia('handheld').matches) {
            design = 'mobile';
        }
    console.log(design);