Conditionally serving different javascript for different screen sizes

Question

As far as I can see, there doesn't seem to be a consensus or definitive answer for this.

I am building a responsive site that, when loaded on a full screen, I want to have a lot of bells & whistles (specifically the Themepunch 'revolution slider' which will display a fancy slideshow of 12 or so slides). I want to completely hide this from mobile screens, and as such, I don't want to waste bandwidth by serving or executing any of the javascript pertaining to it.

I am looking at using Modernizr for this, I guess using the Modernizr.mq() method, something like:

if(Modernizr.mq('all and (min-width: 320px)')) {
    // Import external javascript files and execute code relating to slider
}

I would welcome anyone's views on:

a) Is this a viable option? Is there a better way? b) Can I combine this with Modernizr's load function, eg:

Modernizr.load({
  test: Modernizr.bigScreen, // or.. something? Is there anything in the Modernizr object regarding screen size? Can I add my own using the mq() method first?
  yep : 'rev-slider.js',
  nope: 'basic.js'
});

Thanks in advance.

Answer 1

I am now using the following method which seems to do the required job nicely:

        var bigScreen = false;

        if(Modernizr.mq('all and (min-width: 500px)')) {
            var bigScreen = true;
        }

        Modernizr.load({
            test: bigScreen,
            yep : 'scripts/desktop.js', // put all your JS for fullscreen magic in this file.
            nope: 'scripts/mobile.js' // ...and all your mobile-specific stuff here.
        });            

Answer 2

you can use wurlf to check in what platform you are. and use require.js to load the module.

Answer 3

You may try this code

   <script>
        window.onload = function(){
            function loadJs(filesrc){
                var ele = document.createElement("script");
                ele.setAttribute("type","text/javascript");
                ele.setAttribute("src", filesrc);
                document.getElementsByTagName("head")[0].appendChild(ele);

            }
            if(window.innerWidth > 320){ //your screen size conditions
                loadJs("js/test1.js");
            }else{
                loadJs("js/test2.js");
            }

        };
    </script>

test1.js code

alert("test1");

test2.js code

alert("test2");