Enqueue scripts based on browser width?

Kinda just answering this to counter the “not-possible” answers…

Yes it is probably not the best thing to do, since we are still unsure what the OP is trying to achieve, but that does not make it not possible… complex and impractical perhaps, but still entirely possible.

First enqueue the script as you normally would… here setting the minimum and/or maximum screen widths to load for as well:

add_action('wp_enqueue_scripts','enqueue_screen_size_script');
function enqueue_screen_size_script() {
    global $screensizescripturl, $screenminwidth, $screenmaxwidth;

    // set one or the other or both of these
    $screenminwidth="319"; $screenmaxwidth="769"; 

    $screensizescripturl = get_stylesheet_directory_uri().'/screen-size.js';

    wp_enqueue_script('screen-size',$screensizescripturl,array('jquery'));
}

Then you can filter the enqueue using the script_loader_tag filter, and add some magical javascript to conditionally load the script inside itself:

add_filter('script_loader_tag','enqueue_for_screen_size', 10, 2);
function enqueue_for_screen_size($tag, $handle) {
    global $screensizescripturl, $screenminwidth, $screenmaxwidth;

    if ($handle == 'screen-size') {

        // this would get the src url dynamically, but using global instead
        // $scripturl = substr($tag,(strpos($tag,'src="')+5),strlen($tag));
        // $scripturl = substr($scripturl,0,strpos($tag,'"'));

        $conditionaltag = "if (window.jQuery) {x = jQuery(window).width();}
        else {x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;} ";

        if ( ($screenminwidth) && ($screenmaxwidth) ) {
            $conditionaltag .= "if ( (x > ".$screenminwidth.") && (x < ".$screenmaxwidth.") ) {";
        }
        elseif ($screenminwidth) {$conditionaltag .= "if (x > ".$screenminwidth.") {";}
        elseif ($screenmaxwidth) {$conditionaltag .= "if (x < ".$screenmaxwidth.") {";}

        $conditionaltag .= " document.write(unescape('%3Cscript id=\"screen-size-script\" src=\"".$scripturl."\"%3E%3C\/script%3E')); }</script>";

        $tag = str_replace('src="'.$scripturl.'"','',$tag);
        $tag = str_replace('</script>',$conditionaltag, $tag);
    }

    return $tag;
}

So then, the point of responsiveness being responsive, you would probably need a window resize function to dynamically load the script if it fits your chosen specifications after resize… with a debounce thrown in for good measure.

add_action('wp_footer','screen_resizer_check');
    function screen_resizer_check() {
        global $screensizescripturl, $screenminwidth, $screenmaxwidth;

        // note: debounce window resize function from here:
        // http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed

        echo "<script>jQuery(document).ready(function($) {

            function loadscreensizescript() {
                x = jQuery(window).width();
                ";

                if ( ($screenminwidth) && ($screenmaxwidth) ) {
                    echo "if ( (x > ".$screenminwidth.") && (x < ".$screenmaxwidth.") ) {";
                }
                elseif ($screenminwidth) {echo "if (x > ".$screenminwidth.") {";}
                elseif ($screenmaxwidth) {echo "if (x < ".$screenmaxwidth.") {";}

                echo "
                    newscript = document.createElement('script');
                    newscript.setAttribute('id','screen-size-script');
                    newscript.src="".$screensizescripturl."";
                    document.getElementsByTagName('head')[0].appendChild(newscript);
                }
            }

            /* could just script load here instead of using wp_enqueue script */
            /* loadscreensizescript(); */

            var resizeDebounce = (function () {
                var timers = {};
                return function (callback, ms, uniqueId) {
                    if (!uniqueId) {uniqueId = "nonuniqueid";}
                    if (timers[uniqueId]) {clearTimeout (timers[uniqueId]);}
                    timers[uniqueId] = setTimeout(callback, ms);
                };
            })();


            jQuery(window).resize(function () {
                if (document.getElementById('screen-size-script')) {return;}
                resizeDebounce(function(){ 
                    loadscreensizescript();
                }, 1000, "screensizescript");
            }); 
        });
    }

Although, it is arguably a better just to load the script using jQuery(document).ready in the first place as noted above and not bothering with wp_enqueue_script, but I guess that wouldn’t fully answer the question. 🙂

Note: untested as a whole from otherwise working snippets I have lying around…