Enqueue script if screen is greater than 500

Question

i need to call a javascript only if screen resolution is greater than 500.

I found below code...

<script type='text/javascript' src='<?php echo $urlPlugin?>js/jquery.themepunch.revolution.min.js?rev=<?php echo RevSliderGlobals::SLIDER_REVISION; ?>'></script>

So, i modified it as below...

<script>
if (window.innerWidth > 500) {
    var head = document.getElementsByTagName('head')[0];

    var s1 = document.createElement("script");
    s1.type = "text/javascript";
    s1.src = "http://domain.com/wp-content/plugins/revslider/public/assets/js/jquery.themepunch.revolution.min.js";
    head.appendChild(s1);
}
</script>

However that did not work.

Later i came to know about enqueue function. i have lines as following...

wp_enqueue_script('revmin', RS_PLUGIN_URL .'public/assets/js/jquery.themepunch.revolution.min.js', 'tp-tools', $slver, $ft);

this function auto-calls scripts. so, how do i make it conditional??

instead of enqueueing script i used register_script so that the script can be called later.

Which is working. Then placed javascript code in header.php

However unable to call script if screen is greater than 500.

Also tried this...

 <script>
 if( $(window).width() > 500 )
 {
 $.ajax({
 url: 'http://domain.com/wp-content/plugins/revslider/public/assets/js/jquery.themepunch.revolution.min.js',
 dataType: "script",
 success: function() {
    //success
 }
 });
}
</script>

Answer 1

you can use Window matchMedia() Method https://www.w3schools.com/jsref/met_win_matchmedia.asp like this:

 <script type="text/javascript">
        if (matchMedia('only screen and (min-width: 500px)').matches) {

    }
    </script>

Answer 2

You don't make it conditional on the server side, you just do not initialize/run it on client side when you detect that the width of the window is smaller than 500 pixels.

Trying to detect screen dimension on server side is a big no-no and can fail in all kind of ways (caching, window size change, and probably more).

Answer 3

You cannot make it conditional on the server. Follow the steps below.

1. Enqueue the script in the regular way. I suppose, your code is correct for this- wp_enqueue_script('revmin', RS_PLUGIN_URL .'public/assets/js/jquery.themepunch.revolution.min.js', 'tp-tools', $slver, $ft);

See this for better understanding: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

2. In your JS, use the condition if( $(window).width() > 500 ) { $.ajax({ data: { 'action' : 'your-action', 'other_key' : other_value }, url: ajaxurl, // previously defined. type: 'POST', success: function(data){ // so something } }) }