Question

I have a plugin.js that combine all my plugins for my responsive build. This plugin.js is unnecessarily bulky for mobile. I would like to create 2 plugin.js to switch between for mobile or desktop.

What is the best practice for reducing overhead for mobile scripting?

Examples:
I have a complicated jQuery slider for desktop viewing but I would like that script not to load for mobile.

For this project i’ll be using:
HTML5, WordPress, jQuery, Modernizr.

Answer 1

It depends what you define as mobile. If it’s all devices below a certain width, you can test for that, and then prevent the script running with an if statement.

$(function(){
    var mobile;
    if (window.width < 481) {
        mobile = 1; 
    }

    if (!mobile) {
    // All your stuff.
    }
});